当使用 <svg> 标记将 SVG 直接包含在文档中时，您可以通过文档的样式表将 CSS 样式应用于 SVG。但是，我正在尝试将样式应用于嵌入的 SVG（使用 <object> 标记）。
是否可以使用以下代码之类的东西？
object svg {
fill: #fff;
}
简短的回答：不，因为样式不适用于跨文档边界。
但是，由于您有一个 <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。
您可以在没有 javsscrpt 的情况下通过将带有您的样式的样式块放入 SVG 文件本身来执行此操作。
<style type="text/css">
path,
circle,
polygon {
fill: #fff;
}
</style>
如果使用标记包含 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>
基于@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))
})
您可以创建一个自定义元素来将 SVG 文件注入到您的 html 中。
这样，SVG 将被内联，您可以使用 CSS 轻松应用样式。
这个自定义元素将像
我尝试了太多方法来设置 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>
笔记
例如，如果您想使用 CSS 更改填充颜色，则 SVG 图像不得具有“填充”属性。
custom-svg 效果很好，对于宽度样式使用这个：
custom-svg svg{
max-width:64px;
max-height:64px;
}
关注公众号
不定期副业成功案例分享
