web-dev-qa-db-ja.com

Chrome / FirefoxでSVGが完全に表示されない

このSVG画像がChromeまたはFirefoxで正しく表示されないのはなぜですか？ IE 9で期待どおりに表示されます。これをFirefox5と6、およびChrome 13、14、15でテストしました。すべてWindowsでテストしました。家に帰ったら、LinuxとChromeOSをテストします。

http://upload.wikimedia.org/wikipedia/commons/1/14/Map_of_Rhode_Island_highlighting_Bristol_County.svg

画像は次のようになります。

enter image description here

私は赤い郡だけを見ています、そして他には何も見ていません。ビューポートと関係があるかもしれません：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="6416.0" height="9720.0"
     viewBox="-1856,-3363 6416,9720">...

注意として、ウィキペディアのall郡マップSVG画像でこの動作が発生しますが、ウィキペディアの他のSVG画像である必要はありません。

firefoxgoogle-chromesvg
4
kzh

何が変わったのかはわかりませんが、Chromium 14＆Opera 11.50は現在のFirefoxレンダリング（巨大なキャンバス、赤い国だけを表示）に同意しているので、新しい動作は「正しい」と思います。マークアップ。

編集：わかりました、これをFirefox開発トランクの 毎晩のチェンジセット範囲 までさかのぼります。動作の変更は、 bug 547062 の場合の上位の変更によるものであり、新しい動作は正しく、意図したとおりに表示されます。そのバグに関する最初のコメントを参照してください-<clipPath>は特定の要素のみを含むように制限されており、<g>はそのリストに含まれていません。したがって、テストケースには無効なマークアップがあります。

メカニカルカタツムリのリンクされたバリデーターは上記に同意します-それは言う：document type does not allow element "g" here。

3
dholbert

Dholbertが述べているように、他の最近のWebブラウザーは新しいFirefoxレンダリングに同意しています。

W3Cのマークアップバリデーターはsvgファイルを無効として表示します 、これがおそらく理由です。

1
Mechanical snail