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