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

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

有没有可能使用下面这样的代码？

object svg {
fill: #fff;
}
93952 次浏览
小开
最佳答案

简短的回答是: 不，因为样式不能跨文档边界应用。

但是，因为您有一个 <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);

另一种方法是使用第一种方法，插入一个 style 元素，然后添加@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:

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

Update 2015: you can use Jquery-svg plugin for apply js scripts and css styles to an embedded SVG.

小开

您可以通过在 SVG 文件本身中放置带有样式的样式块来实现这一点，而不需要使用 javsscript。

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

如果使用标记来包含 SVG 的唯一原因是您不想让源代码与来自 SVG 的标记混乱，那么您应该看一看 SVG 注入器，比如 SVGInject。

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>
小开

您可以创建一个自定义元素来将 SVG 文件注入到您的 html 中。

这样，SVG 将是内联的，您可以使用 CSS 轻松地应用样式。

这个自定义元素的工作方式与 < object > 或 < embed > 标记类似。唯一的区别是 < object > 或 < embed > 标记在影子根中注入数据，这阻止了父文档的样式，而 < custom- svg > 在文档本身中注入数据。

我已经尝试了太多的方法来设计我的 SVG 图像，这是迄今为止我发现的最简单和更灵活的方法。

<html>
<head>
<style>
.blue {
fill: blue;
}
.red {
fill: red;
}
</style>
</head>
<body>
<custom-svg class="blue" src="icon.svg"></custom-svg>
<custom-svg class="red" src="icon.svg"></custom-svg>


<script>
class CustomSVG extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
fetch(this.getAttribute('src'))
.then(response => response.text())
.then(text => {
this.innerHTML = text;
});
}
}
customElements.define('custom-svg', CustomSVG);
</script>
</body>
</html>

笔记

  • The SVG image must not have the "fill" attribute if you want, for example, change the fill color using CSS.
小开

custom-svg works very good, for width style use this:

custom-svg svg{
max-width:64px;
max-height:64px;
}
小开

根据@Erik Dahlström 的回答，我找到了一条短路:


let svg_objecst = document.getElementsByClassName('svg-object')


const forceStylingObjSvg = (svg)=>{
var svgDoc = svg.contentDocument;
svgDoc.firstElementChild.setAttribute('fill','blue')
}
Array.from(svg_objecst).forEach((obj)=>{
obj.addEventListener('load',()=>forceStylingObjSvg(obj))
})

提交答案