Menu
I have a site I am working on where we allow creation of shapes and we do this using inline svg built via javascript. I am having a weird issue, where the svg renders correctly in Chrome, but in Firefox it cuts a portion of the SVG out. The code below is a star. In chrome this shows up perfectly. In Firefox I only see the top left 25% of the image or so.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head></head>
<body>
<svg shape-rendering="" preserveAspectRatio="none">
<polygon transform="rotate(0 100 100)" points="256.53212826312154,13.412653125,314.88080229627076,201.3216034012431,499.6516034012431,201.3216034012431,348.91752881560774,320.0009404178177,382.9542553349448,507.9098906940608,256.53212826312154,389.2305536774862,130.11000119129832,507.9098906940608,164.14672771063536,320.0009404178177,13.412653125,201.3216034012431,198.18345422997237,201.3216034012431,256.53212826312154,13.412653125" fill="rgb(49, 48, 255)" stroke="black" stroke-width="2.49125px" style="position: absolute; ">
</polygon>
</svg>
</body>
</html>
I am not sure if we are doing something wrong or if its a problem with Firefox. The interesting thing is if I will make the star smaller (like 1/4 of the size of this one) it renders perfectly in Firefox.
Thanks for the help!
350
You need to add width and height attributes to the <svg> element. width="100%" and height="100%" may well work for your case.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
