Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

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
Natao arisiva ity resaka mitohy ity. Mametraha fanontaniana azafady raha mila fanampiana.
Natao arisiva

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

Marc Sances replied
shrdlu1497

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

Novain'i cor-el t@

All Replies (1)

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