埋め込み SVG の CSS スタイル
短い答え: いいえ
CSS スタイルはドキュメントの境界を越えません。 <オブジェクト>この場合、タグは、含まれているドキュメントと埋め込まれた SVG の間に効果的に境界を作成します。
代替アプローチ
幸いなことに、埋め込まれた SVG のスタイルを設定する代替方法があります。
1.プログラムによるスタイルシートの挿入:
JavaScript を使用すると、スタイルシートを
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // Adjust as needed
svgDoc.getElementById("where-to-insert").appendChild(styleElement);2.外部スタイルシート参照:
A 要素を挿入して外部スタイルシートを参照できます:
var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);3. CSS インポート (@import ルール):
最初の方法は、スタイル要素を挿入し、続いて @import ルールを追加するために使用できます:
styleElement.textContent = "@import url(my-style.css)";
4. SVG スタイルシートの直接リンク:
SVG ファイル自体はスタイルシートを直接参照できます:
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="my-style.css" type="text/css"?> <svg xmlns="http://www.w3.org/2000/svg"> ... (SVG content) ... </svg>
5. jquery-svg プラグイン:
jquery-svg プラグインは、JavaScript および CSS スタイルを埋め込み SVG に適用するための代替アプローチを提供します。
以上がCSS スタイルは「 」タグ内に埋め込まれた SVG に適用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
