I'm trying to rotate this image (#small) so that it's upside down, but the shape isn't rotating as I'd expect. It seems to me that the bounding box would be much smaller than its apparent axis of rotation.
What's actually going on here and how can I fix it?
MWE
<?xml version="1.0" encoding="utf-8"?>
<svg id="test-image"
viewBox="0 0 816 1110"
width="816" height="1110"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="base">
<svg viewBox="-8 -10 16 20" >
<path d="M 7.989,3.103 C 7.747,-0.954 0.242,-8.59 0,-10.5 c -0.242,1.909 -7.747,9.545 -7.989,13.603 -0.169,2.868 1.695,4.057 3.39,4.057 1.8351685,-0.021581 3.3508701,-2.8006944 3.873,-3.341 0.242,0.716 -1.603,6.682 -2.179,6.682 l 5.811,0 C 2.33,10.501 0.485,4.535 0.727,3.819 1.1841472,4.3152961 2.5241276,7.0768295 4.601,7.16 6.295,7.159 8.158,5.971 7.989,3.103 z"
style="fill:#000000" />
</svg>
</g>
<g id="small">
<use xlink:href="#base" transform="scale(0.1,0.1)" />
</g>
</defs>
<!-- debugging grid -->
<rect width="100%" height="100%" stroke="black" fill="white"/>
<rect width="80%" height="80%" stroke="lightgrey" fill="white" x="10%" y="10%" />
<rect width="60%" height="60%" stroke="lightgrey" fill="white" x="20%" y="20%" />
<rect width="40%" height="40%" stroke="lightgrey" fill="white" x="30%" y="30%" />
<rect width="20%" height="20%" stroke="lightgrey" fill="white" x="40%" y="40%" />
<line x1="0%" x2="100%" y1="50%" y2="50%" stroke="lightgrey" />
<line y1="0%" y2="100%" x1="50%" x2="50%" stroke="lightgrey" />
<!-- rotation test -->
<use xlink:href="#small" x="50%" y="50%" />
<use xlink:href="#small" x="50%" y="50%" transform="rotate(10)" />
<use xlink:href="#small" x="50%" y="50%" transform="rotate(20)" />
<use xlink:href="#small" x="50%" y="50%" transform="rotate(30)" />
</svg>
Related
I'm trying to use different SVG elements with a pattern as a fill, but the pattern doesn't get repeated for every element. I'm not sure if there's the possibility to repeat the pattern, but right now it looks as if there's a pattern and three circles create a mask over the pattern. What I want to achieve is the three circles clearly looking differently because each pattern resets for each circle and then it doesn't look 'cut out'.
I suppose a last-resort solution would be to create multiple patterns with different names for every element I use, then it'll work, but I'm hoping there's a less cumbersome way.
I tried:
Wrapping each element in a different SVG container
Appending ids to the elements and then in css target every id separately with the fill being the url
I made a codesandbox which shows my problem:
https://codesandbox.io/s/busy-ives-hv3rr?file=/index.html
The solution #herrstrietzel posted is one way to go.
Another solution is to create variants of your original pattern, but with a different origin. You specify the origin using the x and y attributes.
<svg id="patternId" width="100%" height="100%">
<defs>
<pattern id="a" patternUnits="userSpaceOnUse" width="65" height="65" patternTransform="scale(2) rotate(0)">
<rect x="0" y="0" width="100%" height="100%" fill="hsla(0,0%,100%,1)"/>
<path d="M.5.5v12h12V.5H.5zm13 13v12h12v-12h-12zm-13 13v12h12v-12H.5zm26 13v12h12v-12h-12zm13 13v12h12v-12h-12z"
stroke-width="1" stroke="none" fill="hsla(258.5,59.4%,59.4%,1)"/>
<path d="M26.5.5v12h12V.5h-12zm0 13v12h12v-12h-12zm13 13v12h12v-12h-12zm-39 13v12h12v-12H.5zm0 13v12h12v-12H.5z"
stroke-width="1" stroke="none" fill="hsla(339.6,82.2%,51.6%,1)"/>
<path d="M13.5.5v12h12V.5h-12zm39 13v12h12v-12h-12zm-39 13v12h12v-12h-12zm39 0v12h12v-12h-12zm-26 26v12h12v-12h-12z"
stroke-width="1" stroke="none" fill="hsla(198.7,97.6%,48.4%,1)"/>
<path d="M52.5.5v12h12V.5h-12zm-13 13v12h12v-12h-12zm0 26v12h12v-12h-12zm13 0v12h12v-12h-12zm-39 13v12h12v-12h-12z"
stroke-width="1" stroke="none" fill="hsla(33, 90%, 65%, 1)"/>
</pattern>
<pattern id="a2" href="#a" x="20" y="20"/>
<pattern id="a3" href="#a" x="45" y="50"/>
</defs>
<svg height="200" width="200">
<circle cx="50" cy="50" r="40" fill="url(#a)" />
</svg>
<svg height="200" width="200">
<circle cx="100" cy="50" r="40" fill="url(#a2)" />
</svg>
<svg height="200" width="200">
<circle cx="50" cy="100" r="40" fill="url(#a3)" />
</svg>
</svg>
Another alternative is to switch to objectBoundingBox units. So that the pattern is relative the the object it is applied to.
<svg id="patternId" width="100%" height="100%">
<defs>
<pattern id="a" patternUnits="objectBoundingBox" width="65" height="65">
<g transform="scale(2)">
<rect x="0" y="0" width="100%" height="100%" fill="hsla(0,0%,100%,1)"/>
<path d="M.5.5v12h12V.5H.5zm13 13v12h12v-12h-12zm-13 13v12h12v-12H.5zm26 13v12h12v-12h-12zm13 13v12h12v-12h-12z"
stroke-width="1" stroke="none" fill="hsla(258.5,59.4%,59.4%,1)"/>
<path d="M26.5.5v12h12V.5h-12zm0 13v12h12v-12h-12zm13 13v12h12v-12h-12zm-39 13v12h12v-12H.5zm0 13v12h12v-12H.5z"
stroke-width="1" stroke="none" fill="hsla(339.6,82.2%,51.6%,1)"/>
<path d="M13.5.5v12h12V.5h-12zm39 13v12h12v-12h-12zm-39 13v12h12v-12h-12zm39 0v12h12v-12h-12zm-26 26v12h12v-12h-12z"
stroke-width="1" stroke="none" fill="hsla(198.7,97.6%,48.4%,1)"/>
<path d="M52.5.5v12h12V.5h-12zm-13 13v12h12v-12h-12zm0 26v12h12v-12h-12zm13 0v12h12v-12h-12zm-39 13v12h12v-12h-12z"
stroke-width="1" stroke="none" fill="hsla(33, 90%, 65%, 1)"/>
</g>
</pattern>
<pattern id="a2" href="#a" x="20" y="20"/>
<pattern id="a3" href="#a" x="45" y="50"/>
</defs>
<svg height="200" width="200">
<circle cx="50" cy="50" r="40" fill="url(#a)" />
</svg>
<svg height="200" width="200">
<circle cx="100" cy="50" r="40" fill="url(#a)" />
</svg>
<svg height="200" width="200">
<circle cx="50" cy="100" r="40" fill="url(#a)" />
</svg>
</svg>
Applying transforms like transform="translate(50 50)" (instead of fixed x/y positioning would do the trick.
<svg id="patternId" width="100%" height="100%">
<defs>
<pattern id="pattern-0" patternUnits="userSpaceOnUse" width="65" height="65" patternTransform="scale(2) rotate(0)" >
<g id="patternInner">
<rect x="0" y="0" width="100%" height="100%" fill="hsla(0,0%,100%,1)" />
<path d="M.5.5v12h12V.5H.5zm13 13v12h12v-12h-12zm-13 13v12h12v-12H.5zm26 13v12h12v-12h-12zm13 13v12h12v-12h-12z" stroke-width="1" stroke="none" fill="hsla(258.5,59.4%,59.4%,1)" />
<path d="M26.5.5v12h12V.5h-12zm0 13v12h12v-12h-12zm13 13v12h12v-12h-12zm-39 13v12h12v-12H.5zm0 13v12h12v-12H.5z" stroke-width="1" stroke="none" fill="hsla(339.6,82.2%,51.6%,1)" />
<path d="M13.5.5v12h12V.5h-12zm39 13v12h12v-12h-12zm-39 13v12h12v-12h-12zm39 0v12h12v-12h-12zm-26 26v12h12v-12h-12z" stroke-width="1" stroke="none" fill="hsla(198.7,97.6%,48.4%,1)" />
<path d="M52.5.5v12h12V.5h-12zm-13 13v12h12v-12h-12zm0 26v12h12v-12h-12zm13 0v12h12v-12h-12zm-39 13v12h12v-12h-12z" stroke-width="1" stroke="none" fill="hsla(33, 90%, 65%, 1)" />
</g>
</pattern>
<pattern id="pattern-1" href="#pattern-0" x="80" y="80" patternTransform="scale(2) rotate(45)" />
</defs>
<circle cx="50" cy="50" r="40" fill="url(#pattern-0)" />
<circle cx="50" cy="50" r="50" fill="url(#pattern-0)" transform="translate(50 33)" />
<circle cx="50" cy="50" r="50" fill="url(#pattern-1)" transform="translate(50 33)" />
<rect x="0" y="0" width="50" height="50" stroke="#fff" stroke-width="1" transform="translate(10 60)" fill="url(#pattern-0)" />
</svg>
Worth noting: duplicating patterns for slightly modified usage is pretty straight forward, since the <pattern> element supports referencing/reusing previously defined patterns via href attribute (similar to <use>):
<pattern id="pattern-1" href="#pattern-0" x="80" y="80" patternTransform="scale(2) rotate(45)" />
Would result in a rotated pattern sharing all properties of the initially defined pattern.
I am trying to make mirrored pattern, but when I add displacement filter, it seems it only works on first and fourth quandrant. Am I overlooking some beginner mistake or is this behavior expected?
<svg width="500px" height="500px">
<defs>
<clipPath id="clip">
<rect x="0" y="0" width="50%" height="50%"/>
</clipPath>
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="scale(20) rotate(0)">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2"
style="stroke:red; stroke-width:1" />
</pattern>
<symbol id="quarter">
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)" clip-path="url(#clip)"/>
</symbol>
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
</defs>
<g filter="url(#noise)">
<use xlink:href="#quarter"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(90)"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(180)"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(270)"/>
</g>
</svg>
In your filter I've added xChannelSelector="R" for the feDisplacementMap. I'm using R for red since your shapes are red.
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" xChannelSelector="R" />
</filter>
<svg width="500px" height="500px">
<defs>
<clipPath id="clip">
<rect x="0" y="0" width="50%" height="50%"/>
</clipPath>
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="scale(20) rotate(0)">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2"
style="stroke:red; stroke-width:1" />
</pattern>
<symbol id="quarter">
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)" clip-path="url(#clip)"/>
</symbol>
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" xChannelSelector="R" />
</filter>
</defs>
<g filter="url(#noise)">
<use xlink:href="#quarter"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(90)"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(180)"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(270)"/>
</g>
</svg>
Also I would have applied the filter to the <rect> inside <symbol> instead of applying it to the group.
You're just missing an xChannelSelector or yChannelSelector - one of which is required.
(Update - as you mention in the comment, when you leave this out, it defaults to using the alpha channel in both X and Y - so it will shift everything up and down the top/left bottom/right diagonal axis - so solid color diagonal lines with this orientation will only show distortions at their starting and finishing edges).
If you're not going to process the feTurbulence in some way after you generate it, then any one of the channels (RGBA) works as a displacement source - since Perlin noise is equally noisy in all four channels.
(You don't need to use the R channel because your shapes are red - that's backwards - the channel selector applies to your noise input, not your the shape you want to apply it to.)
<svg width="500px" height="500px">
<defs>
<clipPath id="clip">
<rect x="0" y="0" width="50%" height="50%"/>
</clipPath>
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="scale(20) rotate(0)">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2"
style="stroke:red; stroke-width:1" />
</pattern>
<symbol id="quarter">
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)" clip-path="url(#clip)"/>
</symbol>
<filter id="noise" x="0%" y="0%" width="100%" height="100%">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<g filter="url(#noise)">
<use xlink:href="#quarter"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(90)"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(180)"/>
<use xlink:href="#quarter" style="transform-origin: 50% 50%;" transform="rotate(270)"/>
</g>
</svg>
The code below should generate a circle filled with a diagonal pattern. The code is taken from this question, I just adapted the unit to get the following pattern: line thickness 0.2mm and line distance 1mm.
<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="3.2cm" version="1.1"
viewBox="0 0 5 3.2" width="5.0cm"
xmlns="http://www.w3.org/2000/svg"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs />
<pattern height="0.14142135623730953" id="#1"
patternUnits="userSpaceOnUse" width="0.14142135623730953">
<path d="M-0.07071067811865477,0.07071067811865477
l0.14142135623730953,-0.14142135623730953
M-0.07071067811865477,0.21213203435596428
l0.28284271247461906,-0.28284271247461906
M0.07071067811865477,0.21213203435596428
l0.14142135623730953,-0.14142135623730953"
style="stroke:black; stroke-width:0.02" />
</pattern>
<ellipse cx="2" cy="1.6" fill="url(#1)" id="#2" rx="1.5"
ry="1.5" stroke="black" stroke-width="0.01" />
<ellipse cx="3" cy="1.6" fill="none" id="#3" rx="1.5" ry="1.5"
stroke="none" stroke-width="0.01" />
<text dominant-baseline="hanging" stroke="black"
text-anchor="end" x="0.5" y="0.7000000000000002">$A$</text>
<text dominant-baseline="hanging" stroke="black"
text-anchor="start" x="4.5" y="0.7000000000000002">$B$</text>
</svg>
Ignore the ellipse #3 (it's transparent) and the two texts. Why does the ellipse #2 not show up?
Try this;
Your mistake is in naming id="#1"
if you select something by id you write #elementId
if you define element id you write id="elementId"
<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="3.2cm" version="1.1"
viewBox="0 0 5 3.2" width="5.0cm"
xmlns="http://www.w3.org/2000/svg"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs />
<pattern height="0.14142135623730953" id="1"
patternUnits="userSpaceOnUse" width="0.14142135623730953">
<path d="M-0.07071067811865477,0.07071067811865477
l0.14142135623730953,-0.14142135623730953
M-0.07071067811865477,0.21213203435596428
l0.28284271247461906,-0.28284271247461906
M0.07071067811865477,0.21213203435596428
l0.14142135623730953,-0.14142135623730953"
style="stroke:black; stroke-width:0.02" />
</pattern>
<ellipse cx="2" cy="1.6" fill="url(#1)" id="#2" rx="1.5"
ry="1.5" stroke="black" stroke-width="0.01" />
<ellipse cx="3" cy="1.6" fill="none" id="#3" rx="1.5" ry="1.5"
stroke="none" stroke-width="0.01" />
<text dominant-baseline="hanging" stroke="black"
text-anchor="end" x="0.5" y="0.7000000000000002">$A$</text>
<text dominant-baseline="hanging" stroke="black"
text-anchor="start" x="4.5" y="0.7000000000000002">$B$</text>
</svg>
I have the following SVG code which draws many squares:
<svg width="100%" height="100%" viewBox="0,0,100%,100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="1.388888888888889%" height="5%" patternUnits="userSpaceOnUse">
<path fill="#2e99e5" d="M0 0h960v960H0z" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="8.333333333333333%" height="50%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="url(#smallGrid)"/>
<path fill="none" d="M0 0h960v960H0z" stroke="gray" stroke-width="2" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
Is there a way to select the first 3 <path fill="#2e99e5" d="M0 0h960v960H0z" stroke="gray" stroke-width="0.5"/>
and change the color?
I have an svg shape which uses a pattern. I want the pattern to NOT scale when i scale the shape.
Here's a fiddle with a minimal example, the bigger circle should show the pattern like the smaller one:
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 complex path and the image in the pattern will be a scan of a piece of paper, so just drawing a bigger circle instead of scaling it won't 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 shape:
http://inwonderland.at/new/ihave.png
this is what i want:
http://inwonderland.at/new/iwant.png
i want the background image (bitmap image) to always have its natural size.
You can't get what you want using a pattern, the transform always happens after the fill, and you can't just move the pattern fill into a wrapper either. My suggestion is to use a filter and apply the filter on a wrapper - like so:
<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>
Using viewport
1:1 no zoom
<svg width="800" height="400" viewBox="0 0 800 400">
2:1 zoom double size
<svg width="800" height="400" viewBox="0 0 400 200">
The following elements can use the viewBox attribute
<svg>
<symbol>
<image>
<marker>
<pattern>
<view>
viewbox is fully animatable; and you can zoom into any center point.
<animate attributeName="viewBox" begin="1s" dur="1s"
values="0 0 600 400; 250 180 300 200" fill="freeze" />
Transform a parent tag
Yes an SVG can be a child element but more commonly shapes made with multible tags are placed inside a group tag.
Transform scale can be used with tags which are parents IE the group tag.
<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>
So using your above example scale the shape in a parent tag.
Update
To scale image but not patterns in other words move patterns, or icons, on background image that scales.
<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 full svg
I had to move things around a bit, One full size, (lets call it a map), with an overlay of 1 half size map in the upper left corner. setting the full screen to render between 0 and max of 600. Setting a viewport the same but with the width set to 300 scales it down. I do need to double the radius for this example of scaling.
<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>
This example is scaled using the same circle pattern. The radius does not need to be changed here because the location is not in the tag being scaled. I'm making use of svg tags here but other tags can be used.
<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>