http://dpaste.com/756156/にある SVG ファイルを<object>
orタグで表示すると<embed>
、Firefox に読み込まれる時間の約半分で、画像の下部が切り取られます。インライン CSS を使用すると問題なくレンダリングされ、Chrome と IE9 も適切にレンダリングされます。
「100%」の幅と高さの属性を SVG タグに追加する提案を見たことがありますが、それは役に立ちませんでした。何か案は?
http://dpaste.com/756156/にある SVG ファイルを<object>
orタグで表示すると<embed>
、Firefox に読み込まれる時間の約半分で、画像の下部が切り取られます。インライン CSS を使用すると問題なくレンダリングされ、Chrome と IE9 も適切にレンダリングされます。
「100%」の幅と高さの属性を SVG タグに追加する提案を見たことがありますが、それは役に立ちませんでした。何か案は?
[svg が Firefox でクリップされている] この問題に直面したばかりで、解決策を見つけました。少しランダムでロジックはありませんが、問題は解決しました。
私の svg は、ベジェ曲線を使用して Illustrator で描画された単純な「雲」の形状でした。何度描いても右側(泡のような形)がブラウザでクリッピングされていました。パラメータ(viewBox、x、y、幅、高さなど)をいくら調整しても修正されません。- まだ切り取られていました。実際、これらのパラメータを調整することで、それらのいずれも原因ではないことが明らかになりました。
解決策は、曲線にデータを追加することでした。クリップされていた曲線に別のアンカーポイントを追加しただけで、Firefoxで適切にレンダリングされました。
ランダムだが真実。お役に立てれば
これは、Firefoxがスタイルシートをロードする前にSVGをレンダリングし、それを更新する必要があることに気付いていないことが原因である可能性があります。onload
次のページで提案されているように、イベント(JavaScript)でSVGタグのクラス名を変更してみてください:http: //ajaxian.com/archives/forcing-a-ui-redraw-from-javascript
それがうまくいかない場合は?elm.parentNode.innerHTML += ''
このStackOverflowの質問へのコメントで提案されているように、要素を完全に再生成してみてください: https ://stackoverflow.com/a/2922034/638544
これはバグ1063073によって最近修正されました。修正は Firefox 34 で表示され、その後は回避策は不要になります。