<use xlink.href=" " transform="... ..."

Discuss SVG code, accessible via the XML Editor.
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

<use xlink.href=" " transform="... ..."

Postby JimJoyce » Tue Oct 13, 2009 8:38 pm

I'm trying to get SVG to produce several displays of one polygon.
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.

JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

Re: <use xlink.href=" " transform="... ..."

Postby JimJoyce » Tue Oct 13, 2009 9:25 pm

Sorry - I found the answer.
I omitted the hash '#' in the href.


Return to “SVG / XML Code”