I'm referencing it in a <use xlink:href="poly" ...
and then trying to transform using scale() and rotate().
If I place the polygon definition in <defs> nothing appears.
If the definition is a simple <g>, it appears,
but none of the transforms.
Code using <defs>
Code: Select all
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="100" viewbox="0 0 2000 2000">
<defs>
<g id="hex" style="stroke: black; stroke-width: 2; fill: #fff;">
<polygon points="12 -45 45 -12 33 33 -12 45 -45 12 -33 -33"/>
</g>
</defs>
<g transform="translate(50,50)">
<use xlink:href="hex" x="0" y="0" transform="scale(1.00) rotate(0)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.95) rotate(18)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.90) rotate(36)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.85) rotate(54)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.80) rotate(72)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.75) rotate(90)"/>
</g>
</svg>
Code without <defs>
Code: Select all
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="100" viewbox="0 0 2000 2000">
<g transform="translate(50,50)">
<g id="hex" style="stroke: black; stroke-width: 2; fill: #fff;">
<polygon points="12 -45 45 -12 33 33 -12 45 -45 12 -33 -33"/>
</g>
<use xlink:href="hex" x="0" y="0" transform="scale(1.00) rotate(0)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.95) rotate(18)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.90) rotate(36)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.85) rotate(54)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.80) rotate(72)"/>
<use xlink:href="hex" x="0" y="0" transform="scale(0.75) rotate(90)"/>
</g>
</svg>
Can anyone tell me what I am doing wrong?
Thanks, in advance.