Quote:
Originally Posted by stumped
I also can't see where the xlink:href bits get used. they don't appear in the html code?
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph3-1" x="32.265" y="3.676"/>
</g>
|
Again, I'm not an SVG expert, so take this with a fairly large grain of salt:
The 'symbols' are defined at the top. You would only need to define how unique symbols are drawn once...then you can use them multiple times in the same image:
Code:
<symbol overflow="visible" id="glyph3-1">
<path style="stroke:none;" d="M 3.515625 -1.265625 L 3.28125 -1.265625 C 3.265625 -1.109375 3.1875 -0.703125 3.09375 -0.640625 C 3.046875 -0.59375 2.515625 -0.59375 2.40625 -0.59375 L 1.125 -0.59375 C 1.859375 -1.234375 2.109375 -1.4375 2.515625 -1.765625 C 3.03125 -2.171875 3.515625 -2.609375 3.515625 -3.265625 C 3.515625 -4.109375 2.78125 -4.625 1.890625 -4.625 C 1.03125 -4.625 0.4375 -4.015625 0.4375 -3.375 C 0.4375 -3.03125 0.734375 -2.984375 0.8125 -2.984375 C 0.96875 -2.984375 1.171875 -3.109375 1.171875 -3.359375 C 1.171875 -3.484375 1.125 -3.734375 0.765625 -3.734375 C 0.984375 -4.21875 1.453125 -4.375 1.78125 -4.375 C 2.484375 -4.375 2.84375 -3.828125 2.84375 -3.265625 C 2.84375 -2.65625 2.40625 -2.1875 2.1875 -1.9375 L 0.515625 -0.265625 C 0.4375 -0.203125 0.4375 -0.1875 0.4375 0 L 3.3125 0 Z M 3.515625 -1.265625 "/>
</symbol>
glyph3-1 happens to be the number '2'
Then at the bottom it uses the href to reference which symbol to place at coordinates x,y
Code:
<g style="fill:rgb(0,0,0);fill-opacity:1;">
<use xlink:href="#glyph3-1" x="50.209" y="4.745"/>
</g>