レンダリングインラインSVG in firefox

私はサイトを作っています。私たちはシェイプの作成を許可しています。私たちはJavaScriptを使ってビルドされたインラインSVGを使ってこれを行います。私は奇妙な問題を抱えています。ここではsvgがChromeで正しくレンダリングされますが、FirefoxではSVGの一部が切り捨てられます。以下のコードはスターです。クロムでこれは完全に現れます。 Firefoxでは、画像の左上25％しか表示されません。レンダリングインラインSVG in firefox

<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>

私たちが何か間違っているのか、それともFirefoxに問題があるのかわかりません。興味深いのは、私が星を小さくする（このサイズの1/4のように）、Firefoxで完全にレンダリングする場合です。

ありがとうございました！

出典

2012-04-27 wookie924

widthとheight属性を<svg>要素に追加する必要があります。あなたの場合、width = "100％"とheight = "100％"がうまくいくかもしれません。

出典

2012-04-27 15:41:43

あなたの答えをありがとう。 Firefoxの魅力のように機能します。非常にすばらしい。ご協力いただきありがとうございます。 – wookie924

なぜFirefoxだけがこれを必要としますか？仕様に見られるように、デフォルト値はすでに100％です（[source]（http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute））。 –

http://www.w3.org/TR/2011/PR-SVG11-20110609/coords.html#ViewportSpace最も外側のsvg要素の 'width'属性は、次の条件が満たされない限りビューポートの幅を設定します。すべてが満たされているため、そうではありません。 –

レンダリングインラインSVG in firefox

答えて

関連する問題