CSS 样式可以应用于使用 `` 标签嵌入的 SVG 吗？

将 CSS 样式应用于嵌入的 SVG

使用

简短回答：否

CSS 样式不能跨越文档边界，包括主文档和嵌入的 SVG 之间的边界。

替代解决方案

由于

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // style as desired
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 文件链接到样式表，无需编写脚本：

<?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>

附加选项：JQuery-SVG插件

自 2015 年起，您可以使用 jquery-svg 插件将 JS 脚本和 CSS 样式应用到嵌入式 SVG。

以上是CSS 样式可以应用于使用 `` 标签嵌入的 SVG 吗？的详细内容。更多信息请关注PHP中文网其他相关文章！