想要更改使用<object>加载的SVG的颜色

Question

因此，我以这种方式加载SVG：

<object type="image/svg+xml" data="/assets/pro.svg"></object>

在浏览器中，它是这样显示的：

​

​

所以现在我想更改cls-1和cls-2填充颜色。我尝试使用style标签更改.cls-2和.cls-1类的颜色，并尝试在加载后使用Js和Jquery添加它。这两种方法都不起作用，它似乎不能识别这些类。

那么这是可能的吗？我不介意尝试另一种方法来加载SVG img，只是这是唯一允许我自由更改其大小的方法，以及将看到(并希望操纵)它的每个部分的颜色，同时维护一小段代码。

Answer 1

您需要在SVG中的中添加一个特殊的样式表声明，就在开始的SVG标记之前。它与HTML的link元素相似，但并不完全相同。如下所示：

<?xml-stylesheet type="text/css" href="svg.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="320"
     height="240"
     viewBox="0 0 320 240">
    <rect id="r" class="foo" x="10" y="10" width="300" height="200"/>
</svg>

如果css文件中有类foo的规则，它们将应用于rect。

这应该可以像您提到的那样与<object>一起工作。无需将相同的css文件加载到html中。

要在运行时更改外观，您应该能够访问SVG元素。

纯js：

var r = document.querySelector("#r");
r.classList.remove("foo");
r.classList.add("bar");

请记住，CSS properties for SVG与超文本标记语言是不同的。