当直接 CSS 样式受到限制时，如何有效地设置嵌入式 SVG 样式？

设计嵌入式 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中文网其他相关文章！