html - SVGコンテンツが埋め込みの外側に表示される必要があります

Question

以前、私はIE9でSVG画像が「トリミング」されていないことに関して「誰が間違っていたのか」という質問に答えましたoverflow: hidden。IE9では、他のすべてのサポートブラウザがそうしていました。答えはここにあります。

svg:not(:root) { overflow: hidden; }

HTML5またはSVG仕様のいずれかで他のメモを指摘することにより、元の調査を確認または拒否する人を探しています。何も見つかりませんが、何かが足りないことを確認したいと思います。

私が見つけることができる最善のことは、彼らがここimgでルール7を適用しようとしていることですが、それはタグを介して、または直接ロードされた場合など、SVGドキュメントにのみ適用されます。

score 4 · Accepted Answer

SVG仕様には次のように書かれています：http ：//www.w3.org/TR/SVG/styling.html#UAStyleSheet

FirefoxとChromeがしないことと似ているように見えますか？

score 4 · Accepted Answer

あなたが指定した根拠（具体的には仕様の5番目と7番目の箇条書き）を使用して、あなたの元の答えは私には聞こえます。

IE が正しく、Webkit と Firefox が正しくないということは、信じられないほどありそうにありません。ただし、ご想像のとおり、7 番目の箇条書きが差別化要因です。

このテストケースを Chrome にロードし、開発者ツールを使用して SVG を調べると、次のように表示されます。

(user agent stylesheet)

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
}

Firebug で「Show User Agent CSS」を有効にすると、Firefox で次のルールが表示されます。

svg.css (line 49) <System>

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
}

最後に、テストケースを編集して追加するとsvg { overflow:hidden }、IE は他のブラウザーと視覚的に一致します。

したがって、3 つのブラウザはすべて仕様どおりに動作しているように見えますが、Chrome/Safari/FF にはすべて、ほとんどのユーザーが期待するものにより近い UA ルールがあります。

十分に放っておくことができれば、ここでこの答えをやめます。

ただし、テストケースを編集してを追加するsvg { overflow:visible }と、Chrome と Firefox の両方でオーバーフローしたコンテンツが「正しく」表示されません。この回答の残りの部分でこのデータポイントを解決する方法がわかりません。:/

html - SVGコンテンツが埋め込みの外側に表示される必要があります by default?