`:before` のような CSS 擬似要素はインライン SVG で使用できますか?

インライン SVG の CSS 擬似要素

:before のような CSS 擬似要素を使用して、インライン SVG 要素にコンテンツを挿入するのは簡単ではありません。これは、インライン SVG が置換要素として分類され、生成されたコンテンツの受信から明確に除外されるためです。

置換要素に対する :before および同様の擬似要素の正確な動作は、CSS 仕様で明確に定義されていません。ただし、生成されたコンテンツは、画像、埋め込みドキュメント、およびインライン SVG を含むアプレットに直接適用できないことは広く受け入れられています。

この制限は、置換された要素がドキュメント フローから切り離されているという事実に起因します。これらは書式設定やレイアウトのプロセスには関与せず、そのコンテンツは 1 つの単位として扱われます。そのため、置換された要素内に生成されたコンテンツを追加しようとすると、予期しない結果や一貫性のない結果が生じることがよくあります。

インライン SVG では :before がサポートされていないにもかかわらず、いくつかの回避策が可能である可能性があります。たとえば、外部 SVG ファイルを作成し、

もう 1 つのアプローチは、CSS を使用して SVG 自体のスタイルを操作することです。たとえば、:nth-of-type セレクターを使用して、特定の SVG 要素をターゲットにし、それらにスタイルを適用できます。このメソッドは生成されたコンテンツを直接追加しませんが、SVG の外観をよりきめ細かく制御できるようになります。

CSS の将来のバージョンでは、新しい機能が導入されたり、置換された要素の擬似要素。それまでは、開発者は制限を認識し、インライン SVG のスタイルを設定するための代替ソリューションを検討する必要があります。

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