直接 CSS スタイル設定が制限されている場合、埋め込み SVG を効果的にスタイル設定するにはどうすればよいですか?

埋め込み SVG のスタイル設定: CSS の制限と代替アプローチ

概要

埋め込み SVG (スケーラブル ベクター グラフィックス) のスタイル設定は、直接組み込まれた SVG と比較して課題が生じる可能性があります文書で。効果的なスタイル設定を行うには、制限を理解し、代替方法を検討することが重要です。

埋め込まれた SVG の直接 CSS スタイル

SVG が

object svg {
    fill: #fff;
}

スクリプトを使用したスタイルの挿入

埋め込まれた SVG は別のドキュメントであるため、スクリプトを使用してスタイルを挿入できます。次のメソッドは、

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }";
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 ファイルからの直接スタイル

または、スタイルを直接リンクするか、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>

または

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml">
  </defs>
  ... rest of document here ...
</svg>

追加オプション: jquery-svgプラグイン

さらに柔軟性を高めるために、jquery-svg プラグインは、CSS スタイルと JavaScript スクリプトを埋め込み SVG に適用するメソッドを提供します。

以上が直接 CSS スタイル設定が制限されている場合、埋め込み SVG を効果的にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。