web-dev-qa-db-ja.com

CSS：インラインSVGの前

更新
生成されたコンテンツと置換された要素との関係を指摘してくれたporneLに感謝します。
このまさにトピックに関するこの記事を見つけました。
http://red-team-design.com/css-generated-content-replaced-elements/

興味深いことに、「CSS3 Generated and Replaced Content Module」というタイトルのW3Cドキュメント（11年前から！）は擬似要素:outsideを定義します。これは、生成されたコンテンツを置換された要素の外側に配置することにより、要素を、内部に追加しようとする代わりに。


元の質問

CSS :beforeおよび:after疑似要素を使用してインラインSVG要素のスタイルを設定する方法はありますか？

例： http://jsfiddle.net/wD56Q/

この例では、:beforeで定義されたスタイルはSVGに適用されません（Firefox 29およびChrome 35）でテストされています。:beforeのcontentプロパティについてですか？読み取り、生成されたコンテンツを要素に挿入しようとします。SVGで失敗するのは何ですか？


MDNの関連ドキュメント：

:: before（：before）

:: beforeは、一致した要素の最初の子である擬似要素を作成します。 contentプロパティを使用して、化粧品コンテンツを要素に追加するためによく使用されます。この要素はデフォルトでインラインです。

コンテンツ

コンテンツCSSプロパティは、:: beforeおよび:: after擬似要素とともに使用され、要素内にコンテンツを生成します。 contentプロパティを使用して挿入されたオブジェクトは、置換された匿名要素です。


例のコード：

   svg {
     left: 50px;
     position: absolute;
     top: 50px;
   }
   svg circle {
     fill: green;
   }
   svg:before {
     border: 2px solid blue;
     content: "";
     height: 100px;
     margin: -6px;
     padding: 4px;
     position: absolute;
     width: 100px;
     z-index: -1;
   }
   div {
     background-color: green;
     height: 100px;
     left: 200px;
     position: absolute;
     top: 150px;
     width: 100px;
   }
   div:before {
     border: 2px solid blue;
     content: "";
     height: 100px;
     margin: -6px;
     padding: 4px;
     position: absolute;
     width: 100px;
     z-index: -1;
   }
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

<div></div>
csshtml5svgpseudo-element
41
danbal

いいえ、インラインSVGは画像として扱われ、画像は置換された要素であり、生成されたコンテンツを持つことはできません。

厳密に言えば、それは未定義だと思います。 CSS 2.1 は、単に「画像、埋め込み文書、アプレット」について話しているだけです。 HTML標準 は、画像に対しては定義していますが、SVGは明示的に定義していません。

39
Kornel