如何将样式应用于嵌入式SVG？

107

使用<svg>标记将SVG直接包含在文档中时，您可以通过文档的样式表将CSS样式应用于SVG。但是，我试图将一种样式应用于嵌入的SVG（使用<object>标签）。

是否可以使用以下代码？

object svg { 
    fill: #fff; 
}

html css svg

— 约书亚（Joshua Sortino）
source

我想出了一种轻量级的方法来执行此操作，该方法非常适合您要尝试执行的操作。请参阅以下问答：stackoverflow.com/questions/11978995/…–

— 德鲁·贝克

这实际上是完成任务的答案（来自使用CSS操纵外部svg文件样式属性。）

— Fabien Snauwaert

Answers:

108

简短的回答：不，因为样式不适用于文档边界。

但是，由于有<object>标签，您可以使用脚本将样式表插入svg文档。

这样的事情，并请注意，此代码假定<object>已完全加载：

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

也可以插入一个<link>元素来引用外部样式表：

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);

另一个选择是使用第一种方法，插入样式元素，然后添加@import规则，例如styleElement.textContent = "@import url(my-style.css)"。

当然，您也可以直接从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>

2015年更新：您可以使用jquery-svg插件将js脚本和css样式应用于嵌入式SVG。

— 埃里克·达尔斯特罗姆
source

这是链接外部样式表的方法吗？如果没有，那有可能吗？

— 2011年

上面的代码将样式元素插入到svg中。是的，也可以插入xhtml链接元素以链接到外部样式表，或者也可以插入xml-stylesheet处理指令（请参阅w3.org/Style/styling-XML.html）。

— ErikDahlström，

这真是太棒了Erik！但是，如果不包括svgweb，就无法设法在Chrome中运行该技巧：code.google.com/p/svgweb ...任何想法都是我做错了吗？

— 马特WD

@ MattW-D：您可能应该为此提出一个新问题。chrome中不需要Svgweb。

— ErikDahlström'12年

谢谢Erik，真的很努力尝试通过CSS使字体在svg中工作，将CSS链接到svg的方法是第一次尝试并奇迹般地跨浏览器！

— 戴夫

您可以通过将带有样式的样式块放入SVG文件本身而无需javsscrpt来执行此操作。

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>

— 雷夫利
source

如果使用标记包括SVG的唯一原因是您不想将源代码与SVG中的标记混淆，则应查看SVGInject之类的SVG注入器。

SVG注入使用Javascript将SVG文件内联注入到HTML文档中。这样就可以使用干净的HTML源代码，同时使SVG可以完全由CSS样式化。一个基本的示例如下所示：

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— u山
source

太棒了！感谢您提供的简洁工具。

— Deleplace