When I open a page with svg content in Firefox, the svg only seems to work in the top part of the screen.
There is an animated rectangle in my test html page. The rectangle disappears gradually as it gets about a quarter of the way down the screen. I don't have this problem running the same page in Chrome. The code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVG</title>
</head>
<body bgColor="red">
<script>
var SVG=function(h,w){
var NS="http://www.w3.org/2000/svg";
var svg=document.createElementNS(NS,"svg");
//alert(h);
//svg.width=w;
//d7,=============================,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,svg.height=h;
return svg;
}
var svg=SVG(1800,1800);
document.body.appendChild(svg);
alert (svg.height);
var rect=function(h,w,fill){
var NS="http://www.w3.org/2000/svg";
var SVGObj= document.createElementNS(NS,"rect");
SVGObj.width.baseVal.value=w;
SVGObj.height.baseVal.value=h;
SVGObj.setAttribute("height",h);
SVGObj.style.fill=fill;
return SVGObj;
}
var r= rect(100,200,"blue");
svg.appendChild(r);
r.x.baseVal.value=10;
r.y.baseVal.value=20;
var animate=function(obj){
obj.x.baseVal.value+=1;
obj.y.baseVal.value+=1;
}
setInterval("animate(r)",100);
</script>
</body>
</html>
Thanks
There is an animated rectangle in my test html page. The rectangle disappears gradually as it gets about a quarter of the way down the screen. I don't have this problem running the same page in Chrome. The code is:
<pre><nowiki><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVG</title>
</head>
<body bgColor="red">
<script>
var SVG=function(h,w){
var NS="http://www.w3.org/2000/svg";
var svg=document.createElementNS(NS,"svg");
//alert(h);
//svg.width=w;
//d7,=============================,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,svg.height=h;
return svg;
}
var svg=SVG(1800,1800);
document.body.appendChild(svg);
alert (svg.height);
var rect=function(h,w,fill){
var NS="http://www.w3.org/2000/svg";
var SVGObj= document.createElementNS(NS,"rect");
SVGObj.width.baseVal.value=w;
SVGObj.height.baseVal.value=h;
SVGObj.setAttribute("height",h);
SVGObj.style.fill=fill;
return SVGObj;
}
var r= rect(100,200,"blue");
svg.appendChild(r);
r.x.baseVal.value=10;
r.y.baseVal.value=20;
var animate=function(obj){
obj.x.baseVal.value+=1;
obj.y.baseVal.value+=1;
}
setInterval("animate(r)",100);
</script>
</body>
</html></nowiki></pre>
Thanks
Modificado por cor-el a
Todas as respostas (1)
Ask at svg-developers, you'll probably find your answer faster there.