Geek Answers Handbook

How can I scale a shape without scaling its template?

I have a svg form that uses a template. I want the template not to scale when I scale the shape.

Here's a fiddle with a minimal example, a larger circle should show the template as smaller:

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>

In the end, the shape will be a complicated path, and the image in the template will be a check of a sheet of paper, so just drawing a larger circle instead of scaling will not work.

Update

To clarify what I want, here are two images:

This is what it looks like no matter what I try when I scale the form: http://inwonderland.at/new/ihave.png

here is what i want: http://inwonderland.at/new/iwant.png

, ( ) .

+4
2

, , , , . - - :

<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>
+3

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>

, , .

, , , , .

<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>

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>
+3

More articles:


All Articles