I've embedded svg-shorthand within javascript in an html file.
I've done the same thing within an svg file. The svg is shorter.
Both work in Opera. Neither work in Firefox.
This possibly means some svg feature is not yet implemented in FF.
(Neither work in IE, Chrome or Safari. but that's to be expected.)
The html and the svg files are almost identical.
The html has an extra function initSVG().
functions init() differ by only one line.
Here's the HTML
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head><title>Test Boxes</title>
<script type="text/javascript">
var svg;
var svgns="http://www.w3.org/2000/svg";
var g1,g2,g3; // wrap,main,cont
var a1,b1,c1; // buttons
function rct(x,y,w,h,s,f)
{
var rc;
rc=document.createElementNS(svgns,'rect');
rc.setAttributeNS(svgns,"x",x);
rc.setAttributeNS(svgns,"y",y);
rc.setAttributeNS(svgns,"width",w);
rc.setAttributeNS(svgns,"height",h);
rc.setAttributeNS(svgns,"stroke",s);
rc.setAttributeNS(svgns,"fill",f);
return rc;
}
function txt(id,x,y,msg)
{
var cc=document.createTextNode(msg);
var tx=document.createElementNS(svgns,"text");
tx.setAttributeNS(svgns,"id",id);
tx.setAttributeNS(svgns,"x",x);
tx.setAttributeNS(svgns,"y",y);
tx.appendChild(cc);
return tx;
}
function doBox(id,par,x,y,w,h,s,f)
{
var grp,bx,tx,xt,yt;
grp=document.createElementNS(svgns,"g");
grp.setAttribute("id",id);
bx=rct(x,y,w,h,s,f);
xt=parseInt(x,10)+6+' ';
yt=parseInt(y,10)+16+' ';
alert("DOBOX x,y="+xt+','+yt);
tx=txt(null,xt,yt,id);
grp.appendChild(bx);
grp.appendChild(tx);
par.appendChild(grp);
return grp;
}
function initSVG()
{
svg=document.createElementNS(svgns,'svg');
svg.setAttributeNS(svgns,'width','250');
svg.setAttributeNS(svgns,'height','190');
svg.setAttributeNS(svgns,'version','1.1');
document.body.appendChild(svg);
return svg;
}
function init(evt)
{
svg=initSVG();
alert("INIT svg="+svg);
g1=doBox("wrap",svg,"10","10","230","170","#000","#999");
g2=doBox("main",g1,"30","40","190","120","#000","#bbb");
g3=doBox("cont",g2,"50","70","150","70","#000","#ddd");
a1=doBox("A1",g3,"70","100","30","20","#000","#fff");
b1=doBox("B1",g3,"110","100","30","20","#000","#fff");
c1=doBox("C1",g3,"150","100","30","20","#000","#fff");
}
</script>
</head>
<body onload="init()">
</body>
</html>
And, here's the SVG.
Code: Select all
<?xml version="1.0" standalone="no"?>
<svg version="1.1" baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
width="250" height="250"
onload="init(evt)">
<script type="text/javascript">
var svg;
var svgns="http://www.w3.org/2000/svg";
var g1,g2,g3; // wrap,main,cont
var a1,b1,c1; // buttons
function rct(x,y,w,h,s,f)
{
var rc;
rc=document.createElementNS(svgns,'rect');
rc.setAttributeNS(svgns,"x",x);
rc.setAttributeNS(svgns,"y",y);
rc.setAttributeNS(svgns,"width",w);
rc.setAttributeNS(svgns,"height",h);
rc.setAttributeNS(svgns,"stroke",s);
rc.setAttributeNS(svgns,"fill",f);
return rc;
}
function txt(id,x,y,msg)
{
var cc=document.createTextNode(msg);
var tx=document.createElementNS(svgns,"text");
tx.setAttributeNS(svgns,"id",id);
tx.setAttributeNS(svgns,"x",x);
tx.setAttributeNS(svgns,"y",y);
tx.appendChild(cc);
return tx;
}
function doBox(id,par,x,y,w,h,s,f)
{
var grp,bx,tx,xt,yt;
grp=document.createElementNS(svgns,"g");
grp.setAttribute("id",id);
bx=rct(x,y,w,h,s,f);
xt=parseInt(x,10)+6+' ';
yt=parseInt(y,10)+16+' ';
tx=txt(null,xt,yt,id);
alert("DOBOX x,y="+xt+','+yt);
grp.appendChild(bx);
grp.appendChild(tx);
par.appendChild(grp);
return grp;
}
function init(evt)
{
svg=evt.target.ownerDocument.documentElement;
alert("INIT svg="+svg);
g1=doBox("wrap",svg,"10","10","230","170","#000","#999");
g2=doBox("main",g1,"30","40","190","120","#000","#bbb");
g3=doBox("cont",g2,"50","70","150","70","#000","#ddd");
a1=doBox("A1",g3,"70","100","30","20","#000","#fff");
b1=doBox("B1",g3,"110","100","30","20","#000","#fff");
c1=doBox("C1",g3,"150","100","30","20","#000","#fff");
}
</script>
</svg>