Html 如何将样式应用于嵌入式 SVG？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4906148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply a style to an embedded SVG?
提问by Joshua Sortino
When an SVG is directly included in a document using the <svg>tag, you can apply CSS styles to the SVG via the document's stylesheet. However, I am trying to apply a style to an SVG which is embedded (using the <object>tag).
当使用<svg>标签将 SVG 直接包含在文档中时，您可以通过文档的样式表将 CSS 样式应用于 SVG。但是，我正在尝试将样式应用于嵌入的 SVG（使用<object>标签）。
Is it possible to use anything such as the following code?
是否可以使用诸如以下代码之类的任何内容？
object svg {
fill: #fff;
}
回答by Erik Dahlstr?m
Short answer: no, since styles don't apply across document boundaries.
简短回答：不，因为样式不适用于跨文档边界。
However, since you have an <object>tag you can insert the stylesheet into the svg document using script.
但是，由于您有一个<object>标签，您可以使用脚本将样式表插入到 svg 文档中。
Something like this, and note that this code assumes that the <object>has loaded fully:
像这样，请注意，此代码假定<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);
It's also possible to insert a <link>element to reference an external stylesheet:
也可以插入一个<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);
Yet another option is to use the first method, to insert a style element, and then add an @import rule, e.g styleElement.textContent = "@import url(my-style.css)".
另一种选择是使用第一种方法，插入一个样式元素，然后添加一个@import 规则，例如styleElement.textContent = "@import url(my-style.css)".
Of course you can directly link to the stylesheet from the svg file too, without doing any scripting. Either of the following should work:
当然，您也可以直接从 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>
or:
或者：
<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>
Update 2015: you can use jquery-svgplugin for apply js scripts and css styles to an embedded SVG.
2015 年更新：您可以使用jquery-svg插件将 js 脚本和 css 样式应用于嵌入式 SVG。
回答by R Reveley
You can do this without javsscrpt by putting a style block with your styles inside the SVG file itself.
您可以通过在 SVG 文件本身中放置一个带有您的样式的样式块来在没有 javsscrpt 的情况下执行此操作。
<style type="text/css">
path,
circle,
polygon {
fill: #fff;
}
</style>
回答by Waruyama
If the only reason for using the tag to inlcude the SVG is that you do not want to clutter your source code with the markup from the SVG, you should take a look at SVG injectors like SVGInject.
如果使用标记来包含 SVG 的唯一原因是您不想用来自 SVG 的标记来混淆源代码，那么您应该看看像SVGInject这样的 SVG 注入器。
SVG injection uses Javascript to inject an SVG file inline into your HTML document. This allows for clean HTML source code while making the SVGs fully styleable with CSS. A basic example looks like this:
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>
