SVG Symbols : Adding new nodes to a use tag

Question

Hi,

Just playing the defs and use for the first time. What I would like to do is use defs to build a base template and then when I use it customise it by adding some more inner tags.

Is this possible, as when I try to do it in Firefox it doesn't render any tags which I place as children to the use tag. e.g:

<?xml version="1.0" standalone="no"?>
<svg width="10000px" height="5500px" version="1.1"
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

 <defs>
  <g id="storyCard">
   <rect width="800px" height="500px" fill="#ffff00" />
   <path d="M 20 120 L 780 120 M 640 20 L 640 120" stroke-width="6px" stroke="black" fill="none" />
  </g>
 </defs>

 <!-- White Board -->
 <path d="M 0 0 L 10000 0 L 10000 550 L 0 5500 z M 2000 0 L 2000 5500" stroke-width="20px" stroke="black" fill="none" />
 <use xlink:href="#storyCard" transform="translate(100,100)" />
 <use xlink:href="#storyCard" transform="translate(1000,200)" >
   <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive">
    My Dummy Story
   </text>
 </use>
</svg>

Regards,

Chris

Answer 1

It isn't directly possible with use. The use element can contain description and animation elements, but it doesn't behave like an XBL container.

You could use XBL, if you're targeting firefox.

To stay within SVG, make a group and use the background:

    <g transform="translate(1000,200)" >
        <use xlink:href="#storyCard"/>
        <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive">
            My Dummy Story
        </text>
    </g>