CSS :before および :after 疑似要素でインライン SVG のスタイルを設定できますか?

CSS :before および :after を使用したインライン SVG のスタイル設定

CSS :before および :after 擬似要素を使用してインライン SVG 要素をスタイル設定するが課題であることが証明されました。 SVG の視覚的なインパクトを高める可能性があるにもかかわらず、このアプローチは、置換要素としての SVG の性質による制限に直面しています。

:before および :after 擬似要素は、主に要素内のコンテンツを生成するために使用されます。その結果、匿名の置換要素が生成されます。ただし、SVG はすでに要素が置き換えられているため、生成されたコンテンツを使用して追加のコンテンツを挿入することが困難です。

提供された例 (http://jsfiddle.net/wD56Q/) は、:before で定義されたスタイルの問題を示しています。 SVG には影響しません。これは、画像と同様に、SVG には生成されたコンテンツを含めることができないためです。これらはアトミックとみなされ、内部コンテンツを変更する CSS プロパティの影響を受けることはありません。

この制限を克服するには、生成されたコンテンツを置換された要素の外側に配置する疑似要素である CSS :outside のような実験的なソリューションを検討することができます。その内部ではなく。ただし、このアプローチはまだ開発中であり、広くサポートされていない可能性があります。

結論として、CSS :before および :after を使用してインライン SVG 要素を直接スタイル設定することは現在サポートされていません。 SVG は置換された要素であるため、生成されたコンテンツを含めることはできません。 CSS :outside などの他のアプローチは、将来的に潜在的なソリューションを提供する可能性がありますが、その採用は依然として不確実です。

以上がCSS :before および :after 疑似要素でインライン SVG のスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。