當直接 CSS 樣式受到限制時，如何有效地設定嵌入式 SVG 樣式？-css教學-PHP中文網

當直接 CSS 樣式受到限制時，如何有效地設定嵌入式 SVG 樣式？

Barbara Streisand

發布： 2024-12-23 03:16:17

原創

346 人瀏覽過

How Can I Effectively Style Embedded SVGs When Direct CSS Styling Is Limited?

設計嵌入式SVG：CSS 限制和替代方法

概述

與直接包含的SVG 相比，設計嵌入式SVG（可縮放向量圖形）可能會帶來挑戰在一個文件中。了解限制並探索替代方法對於有效的樣式至關重要。

嵌入式 SVG 的直接 CSS 樣式

當使用

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中文網其他相關文章！