埋め込み 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);
ログイン後にコピー
- タグ、
- 技術的な説明
スタイルシートは、スタイルシートが定義されているドキュメントの境界内でのみ適用されます。埋め込まれた SVG は別のものとみなされます。したがって、外部で定義されたスタイルは影響を与えることができません。
解決策: スクリプトベースのスタイル挿入
object[data="my-embedded-svg.svg"] {
fill: #fff;
}
ログイン後にコピー
これは、
代替アプローチSVG にスタイルシートを含める: 内部から外部スタイルシートへのリンク?xml-stylesheet 処理命令または
を使用した SVG ファイル
内の要素jQuery-SVG プラグインの使用: jQuery-SVG プラグインを利用して、JavaScript および CSS スタイルを埋め込み SVG に適用します。ダイレクト CSSターゲティング埋め込みSVGが保存されている場合別のファイルとして、