ホームページ >ウェブフロントエンド >CSSチュートリアル >「タグ」を使用して埋め込みSVGのスタイルを設定するにはどうすればよいですか?
「タグ」を使用して埋め込みSVGのスタイルを設定するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-12-25 17:50:14661ブラウズ
埋め込み 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 ファイル声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。