Adding new nodes to an SVG <use> tag -


Just play defs and use it for the first time What I would like to do is to use DEF to build the base template and Then when I use it, then customize it by adding some more inner tags.

Is it possible, when I try to do this in Firefox do not present any tags that I use as children's tags. Ex:

  & lt ;? Xml version = "1.0" standalone = "no"? & Gt; & Lt; 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; & Lt; Defs & gt; & Lt; G id = "storyCard" & gt; & Lt; Reset width = "800px" height = "500px" fill = "# ffff00" /> & Lt; Path D = "M20 120 L780 120 M 640 20 L 640 120" Stroke-width = "6 Px" Stroke = "Black" Fill = "None" /> & Lt; / G> & Lt; / Defs & gt; & Lt ;! - White board - & gt; & Lt; Path D = "MLL 10000 L L0000 550 L 5500 JM 2000 2000 L 2000 5500" Stroke-Width = "20 Px" Stroke = "Black" Fill = "None" /> & Lt; Use xlink: href = "#testcard" conversion = "translation (100100)" /> & Lt; Use xlink: href = "# storyCard" transform = "translation (1000,200)" & gt; & Lt; Text x = "20" y = "80" font-size = "45" font-weight = "bold" font-family = "comic suns MS, cursor" & gt; My Dummy Story & lt; / Text & gt; & Lt; / Usage & gt; & Lt; / Svg & gt; It is not possible directly with the use, it can contain descriptions and animation elements, But it does not behave like a container.  

If you are targeting Firefox then you can use XBL.

To stay inside SVG, use a group and background to create:

  & lt; G transform = "translate (1000,200)" & gt; & Lt; Use xlink: href = "# storyCard" /> & Lt; Text x = "20" y = "80" font-size = "45" font-weight = "bold" font-family = "comic suns MS, cursor" & gt; My Dummy Story & lt; / Text & gt; & Lt; / G>  

Comments