Ajout de nouveaux noeuds à un tag SVG <use>

Question

Il suffit de jouer les defs et de les utiliser pour la première fois. Ce que je voudrais faire, c'est utiliser des defs pour construire un template de base et ensuite, quand je l'utilise, le personnaliser en ajoutant quelques balises internes.

Est-ce possible, car lorsque j'essaie de le faire dans Firefox, il ne restitue pas les balises que je place comme enfants dans la balise d'utilisation. par exemple:

<?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"> 

    <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> 

Answer 1

Ce n'est pas directement possible avec l'utilisation. Le use element peut contenir des éléments de description et d'animation, mais il ne se comporte pas comme un conteneur XBL.

Vous pouvez utiliser XBL si vous ciblez firefox.

Pour rester dans SVG, Formez un groupe et d'utiliser l'arrière-plan:

<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>