埋め込まれた SVG に CSS スタイルを適用する
短い答え: いいえ
CSS スタイルは、メイン ドキュメントと埋め込まれた SVG 間の境界を含む、ドキュメントの境界を越えることはできません。
代替ソリューション
<オブジェクト>タグが関係している場合は、JavaScript を使用して SVG ドキュメントにスタイルシートを挿入できます。以下に例を示します (
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // style as desired
svgDoc.getElementById("where-to-insert").appendChild(styleElement);さらに、 を挿入できます。要素を外部スタイルシートに追加します:
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);直接リンク
スクリプトを使用せずに、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"> ... rest of document here ... </svg>
追加オプション: JQuery-SVGプラグイン
2015 年現在、jquery-svg プラグインを使用して JS スクリプトと CSS スタイルを埋め込み SVG に適用できます。
以上がCSS スタイルは、「 」タグを使用して埋め込まれた SVG に適用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
