use1.setAttributeNS(xref,"xlink:href", "#mySymbol") is incorrect. The correct form would be
use1.setAttributeNS(xref,"href", "#mySymbol") Best regards Robert. --- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@...> wrote: > > > > --- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@> wrote: > > > > > > Nick de Voil wrote: > > > > > > As part of a web-based drawing and diagramming application, I would like > > > to be able to create <use> elements on the fly, referring to <symbol> > > > elements which would themselves also ideally be defined on the fly. > > > > > > So far, it seems that, if I define the symbols in a static SVG file, > > > Opera can then instantiate the <use> elements exactly as I would hope > > > using JavaScript, but Firefox, Chrome and Safari cannot. If I try to > > > define the symbols themselves using script, even Opera can't manage it. > > > > > > Can anyone either confirm that I'm trying to push SVG further than it > > > will go, or conversely that these things can actually be done? > > > > > > Thanks > > > > > > Nick > > > > > > > Hi Nick, > > Dynamically building SVG elements is a 'must have' within a browser. > > I've tested IE9 with inline SVG and find it can dynamically build/update > > all svg elements. > > e.g. > > //---namespace required to create inline svg elements---- > > var NS="http://www.w3.org/2000/svg"; > > var mySymbol=document.createElementNS(NS,"symbol"); > > mySymbol.id="mySymbol" > > mySVG.appendChild(mySymbol) > > I don't do much work in other browsers, but It would be a major oversight > > if they do not include dynamic SVG. > > Regards, > > Francis > > > > Below is the HTML5 file that demonstrates this feature: > > <!DOCTYPE HTML> > <html> > <body> > Inline SVG:<svg id=mySVG width="300" height="300" > > <rect x="0" y="0" width="300" height="300" fill="yellow"/> > </svg> > <button onClick='build()'>build</button> > </body> > <script> > function build() > { > //---namespace required to create inline svg elements---- > var NS="http://www.w3.org/2000/svg"; > var mySymbol=document.createElementNS(NS,"symbol"); > mySymbol.id="mySymbol" > //--- elements created with their centers at 0,0--- > var myRect=document.createElementNS(NS,"rect"); > myRect.id="myRect" > myRect.setAttribute("fill","red") > myRect.setAttribute("x",-50) > myRect.setAttribute("y",-50) > myRect.setAttribute("width",100) > myRect.setAttribute("height",100) > mySymbol.appendChild(myRect) > > var myCircle=document.createElementNS(NS,"circle"); > myCircle.id="myCircle1" > myCircle.setAttribute("fill","blue") > myCircle.setAttribute("cx",0) > myCircle.setAttribute("cy",0) > myCircle.setAttribute("r",50) > mySymbol.appendChild(myCircle) > > var myEllipse=document.createElementNS(NS,"ellipse"); > myEllipse.id="myEllipse" > myEllipse.setAttribute("fill","lime") > myEllipse.setAttribute("cx",0) > myEllipse.setAttribute("cy",0) > myEllipse.setAttribute("rx",50) > myEllipse.setAttribute("ry",25) > mySymbol.appendChild(myEllipse) > > //---symbol shows elements below 0,0-- > mySymbol.setAttribute("overflow","visible") > mySVG.appendChild(mySymbol) > > var xref="http://www.w3.org/1999/xlink"; > var use1=document.createElementNS(NS,"use"); > use1.setAttributeNS(xref,"xlink:href", "#mySymbol") > use1.setAttribute("x",60) > use1.setAttribute("y",60) > mySVG.appendChild(use1) > > var use2=document.createElementNS(NS,"use"); > use2.setAttributeNS(xref,"xlink:href", "#mySymbol") > use2.setAttribute("x",140) > use2.setAttribute("y",140) > mySVG.appendChild(use2) > > var use3=document.createElementNS(NS,"use"); > use3.setAttributeNS(xref,"xlink:href", "#mySymbol") > use3.setAttribute("x",220) > use3.setAttribute("y",220) > mySVG.appendChild(use3) > } > </script> > </html> > ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
