This thread was archived.
Please ask a new question if you need help.
Solved
Archived
I have code in html and in svg, both work in Opera, neither work in Firefox, can I submit the code
<!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>
<?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><pre><nowiki><!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>
<?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></nowiki></pre>
Modified by cor-el
All Replies (2)
Chosen Solution
A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
If this works in Opera it would seem to be Opera that's buggy.
While svg elements need to be created in the svg namespace which you have done, most svg attributes are in general in the null namespace so you create them using
rc.setAttributeNS(null,"y",y);
or more simply
rc.setAttribute("y",y);
the only exceptions really are href attributes which are in the xlink namespace and where you do need to use setAttributeNS but I don't think you have any of those.