Как я могу масштабировать фигуру без масштабирования ее рисунка?

Question

У меня есть форма svg, которая использует шаблон. Я хочу, чтобы шаблон не масштабировался, когда я масштабирую фигуру.

Вот скрипку с минимальным, например, больший круг должен показать рисунок как меньший:

http://jsfiddle.net/cTMrQ/6/

<svg style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> 
    <defs> 
     <pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4"> 
      <image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" /> 
     </pattern> 
     <circle fill="url(#checkerPattern)" id="c" cx="50" cy="50" r="50" /> 
    </defs> 
    <use x="100" y="100" xlink:href="#c" /> 
    <use x="200" y="100" xlink:href="#c" transform="scale(2)" /> 
</svg> 

В конце концов форма будет сложный путь и образ в шаблон будет проверкой листа бумаги, поэтому просто рисование большего круга вместо масштабирования не будет работать.

Update

Чтобы пояснить, что я хочу, вот два изображения:

это то, что он выглядит, независимо от того, что я стараюсь, когда я масштабировать форму: http://inwonderland.at/new/ihave.png

это то, что я хочу: http://inwonderland.at/new/iwant.png

Я хочу, чтобы фоновое изображение (растровое изображение) всегда было Его естественный размер.

Answer 1

Вы не можете получить то, что вы хотите с помощью шаблона, преобразование всегда происходит после заливки, и вы не можете просто переместить шаблон заполнения в обертку либо. Мое предложение - использовать фильтр и наложить фильтр на обертку - например:

<svg style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> 
    <defs> 

<circle fill="url(#checkerPattern)" id="c1" cx="50" cy="50" r="50" /> 

<filter id="linepattern" x="0%" y="0%" height="100%" width="100%"> 
<feImage xlink:href="http://inwonderland.at/new/lines.png" result="pattern" width="4" height="4"/> 
    <feTile/> 
    <feComposite operator="in" in2="SourceGraphic"/> 
     </filter> 
    </defs> 

    <use filter="url(#linepattern)" x="100" y="100" xlink:href="#c1" /> 

    <use filter="url(#linepattern)" x="200" y="100" xlink:href="#c1" transform="scale(2)" /> 

    <g filter="url(#linepattern)"> 
    <use x="50" y="100" xlink:href="#c1" transform="scale(2)" /> 
</g> 
</svg> 

Answer 2

Используя окно просмотра

1: 1 нет масштабирования

<svg width="800" height="400" viewBox="0 0 800 400"> 

2: 1 масштабирование двойной размер

<svg width="800" height="400" viewBox="0 0 400 200"> 

Следующие элементы могут использовать Viewbox атрибут

<svg> 
<symbol> 
<image> 
<marker> 
<pattern> 
<view> 

viewbox полностью анимируется; и вы можете увеличить масштаб в любую центральную точку.

<animate attributeName="viewBox" begin="1s" dur="1s" 
      values="0 0 600 400; 250 180 300 200" fill="freeze" /> 

Преобразовать родительский тег

Да SVG может быть дочерним элемент, но чаще форм сделаны с многодисковыми тегами помещаются внутри тега группы.

Шкала преобразования может использоваться с тегами, которые являются родителями IE тегом группы.

<g transform="scale(1.5)"> 
/* draw your shape inside the g tag */ 
<use x="100" y="100" xlink:href="#c" /> 
<use x="200" y="100" xlink:href="#c" /> 
</g> 

Таким образом, используя приведенный выше пример, нарисуйте фигуру в родительском теге.

Update

Чтобы масштабировать изображение, но не модели другими словами переместить шаблоны, или значки, на фоновое изображение, которое масштабируется.

<g transform="scale(2)"> 
/* draw your shape inside the g tag */ 
<use x="100" y="100" xlink:href="#c" transform="scale(.5)" /> 
<use x="200" y="100" xlink:href="#c" transform="scale(.5)"/> 
</g> 

Update полный SVG

мне пришлось переместить вещи вокруг немного, один полный размер, (позволяет называть его картой), с наложением 1 половины размера карты в верхнем левом углу , чтобы весь экран отображался между 0 и макс 600. Настройка видового экрана одинакова, но с шириной, установленной на 300, масштабируется. Мне нужно удвоить радиус для этого примера масштабирования.

<svg viewBox="0 0 600 600" style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" 

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> 
    <defs> 
     <pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4"> 
      <image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" /> 
     </pattern> 
     <circle fill="url(#checkerPattern)" id="c" cx="50" cy="50" r="50" /> 
     <circle fill="url(#checkerPattern)" id="c2" cx="50" cy="50" r="100" /> 
    </defs> 
<use x="100" y="100" xlink:href="#c" transform="scale(.5)"/> 
<use x="200" y="100" xlink:href="#c" transform="scale(1)"/> 
<rect width="600" height="600" style="fill: none; stroke: black;" /> 

<svg viewBox="0 0 600 600" width="300" height="300" x="300"> 
<use x="100" y="100" xlink:href="#c2" transform="scale(.5)"/> 
<use x="200" y="100" xlink:href="#c2" transform="scale(1)"/> 
<rect width="600" height="600" style="fill: none; stroke: black;" /> 
</svg> 
</svg> 

Этот пример масштабируется с использованием того же шаблона круга. Здесь нет необходимости изменять радиус, потому что местоположение не находится в масштабируемом теге. Я использую здесь теги svg, но можно использовать другие теги.

<svg viewBox="0 0 600 600" style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" 

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> 
    <defs> 
     <pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4"> 
      <image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" /> 
     </pattern> 
     <circle fill="url(#checkerPattern)" id="c" r="50" cx="50" cy="50" /> 
    </defs> 


<svg x="100" y="100"><use xlink:href="#c" transform="scale(.5)"/></svg> 
<svg x="200" y="100"><use xlink:href="#c" transform="scale(1)"/></svg> 
<rect width="600" height="600" style="fill: none; stroke: black;" /> 

<svg viewBox="0 0 600 600" width="300" height="300" x="300"> 
<svg x="100" y="100"><use xlink:href="#c" transform="scale(1)"/></svg> 
<svg x="200" y="100"><use xlink:href="#c" transform="scale(2)"/></svg> 
<rect width="600" height="600" style="fill: none; stroke: black;" /> 
</svg> 
</svg>