CSS `:before` がインライン SVG 要素で機能しないのはなぜですか?

インライン SVG の CSS :before

はじめに

:before および :after 疑似要素を使用してインライン SVG 要素のスタイルを設定することは、Web では一般的なタスクです発達。ただし、SVG を含む、置換された要素に課せられる制限を理解することが重要です。

問題

指定されたコード例では、SVG 要素に適用された :before スタイルは反映されません。生成されたコンテンツが SVG に適用できない可能性があることを示します。

置換された要素と生成されたコンテンツ

インラインSVG は置換された要素とみなされます。つまり、SVG はコンテンツのフローの一部ではなく、親要素の代わりになります。一方、生成されたコンテンツは、:before や :after のような疑似要素を使用してドキュメント ツリーに挿入されたコンテンツです。

CSS 仕様

CSS で生成されたコンテンツの仕様は、 「CSS3 で生成および置換されたコンテンツ モジュール」。このドキュメントによると、生成されたコンテンツは置換された要素内では許可されません。これは、例の SVG での :before スタイル設定の失敗を説明しています。

考えられる解決策: :outside 擬似要素

生成されたコンテンツは置換された要素内ではサポートされていませんが、W3C ドキュメントは引用された解決策は、:outside 擬似要素です。この疑似要素は、生成されたコンテンツを置換された要素の外側に配置し、事実上制限を回避します。残念ながら、:outside のサポートは現在制限されています。

結論

置換される要素に課せられる制限のため、:before または :after を使用してインライン SVG のスタイルを設定することはできません。この問題に対処するには、クラスや属性を使用して、必要なスタイルを持つ要素を動的に追加するなどの代替方法を検討してください。

以上がCSS `:before` がインライン SVG 要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。