Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

When I open a page with svg content in Firefox, the svg only seems to work in the top part of the screen.

more options

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

Endret av cor-el

All Replies (1)

more options

Ask at svg-developers, you'll probably find your answer faster there.