--- In [email protected], "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: [email protected]
-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:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
