在CSS和/或javascript中更改SVG颜色（带有对象标记）不会产生任何效果

我知道如果使用和img标记，就不能用css更改svg的颜色，而是应该使svg内联，但在我的例子中，我有多个大型svg，我想用javascript动态更改颜色，因此使它们内联不是我的最佳选择

然后我读到了关于使用对象标记的内容，因为这应该是可行的，但在我的例子中却不行

我读了一些其他问题，但它们没有帮助我f.e.：

5个svg中的1个：

  <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#D1D3D4;}
.st1{fill:#48484A;}
.st2{fill:#A7A9AC;}
.st3{fill:#A5A7AA;}
.st4{fill:#999B9E;}
.st5{fill:#86888A;}
.st6{fill:#6F7173;}
.st7{fill:#919396;}
.st8{fill:#95979A;}
.st9{fill:#9D9FA2;}
.st10{fill:#5C5D60;}
.st11{fill:#4D4D4F;}
.st12{fill:#B3B5B8;}
.st13{fill:#848689;}
.st14{fill:#464547;}
.st15{fill:#5F6062;}
</style>
<circle class="st0" cx="256" cy="256" r="72"/>
<rect x="205.27" y="248.48" class="st1" width="28.58" height="28.58"/>
<rect x="182.46" y="235.71" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -51.9599 51.6119)" 
class="st2" width="18.87" height="18.87"/>
<rect x="232.86" y="243.14" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -52.2999 63.5915)" 
class="st3" width="18.87" height="18.87"/>
<rect x="245.75" y="176.51" transform="matrix(0.9741 0.2262 -0.2262 0.9741 49.4071 -53.4856)" 
class="st4" width="24.77" height="24.77"/>
<rect x="210.3" y="288.4" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -62.63 58.4723)" class="st5" 
width="10.44" height="10.44"/>
<rect x="228.98" y="203.02" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -42.0119 60.2779)" 
class="st6" width="8.94" height="8.94"/>
<rect x="200.81" y="210.44" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -44.5261 53.9019)" 
class="st7" width="8.94" height="8.94"/>
<rect x="315.69" y="239.1" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -48.0412 81.5338)" 
class="st8" width="8.94" height="8.94"/>
<rect x="259.63" y="258.29" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -54.0773 68.9685)" 
class="st6" width="8.94" height="8.94"/>
<rect x="266.1" y="187.31" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -37.3152 68.5146)" 
class="st6" width="8.94" height="8.94"/>
<rect x="213.46" y="217.63" transform="matrix(0.8976 0.4409 -0.4409 0.8976 122.5313 -74.7543)" 
class="st9" width="17.34" height="17.34"/>
<rect x="258.74" y="208.67" transform="matrix(0.888 -0.4598 0.4598 0.888 -69.489 146.4779)" 
class="st6" width="14.47" height="14.47"/>
<rect x="228.74" y="219.06" transform="matrix(0.888 -0.4598 0.4598 0.888 -77.6288 133.849)" 
class="st10" width="14.47" height="14.47"/>
<rect x="291.47" y="278.06" transform="matrix(0.888 -0.4598 0.4598 0.888 -97.7318 169.2965)" 
class="st6" width="14.47" height="14.47"/>
<rect x="319.19" y="216.97" transform="matrix(0.8976 0.4409 -0.4409 0.8976 137.6805 -124.3104)" 
class="st6" width="34.3" height="34.3"/>
<rect x="248.1" y="228.29" transform="matrix(0.9966 -0.0818 0.0818 0.9966 -19.1719 22.5035)" 
class="st11" width="33.7" height="33.7"/>
<rect x="287.65" y="191.42" transform="matrix(0.8976 0.4409 -0.4409 0.8976 119.873 -110.9557)" 
class="st12" width="22.11" height="22.11"/>
<rect x="241.11" y="302.53" transform="matrix(0.8976 0.4409 -0.4409 0.8976 164.0936 -79.0563)" 
class="st13" width="22.11" height="22.11"/>
<rect x="263.89" y="275.74" transform="matrix(0.9922 -0.1245 0.1245 0.9922 -32.8863 35.6894)" 
class="st6" width="10.62" height="10.62"/>
<rect x="297.3" y="270.02" transform="matrix(0.9966 -0.0818 0.0818 0.9966 -22.6692 26.938)" 
class="st3" width="40.01" height="40.01"/>
<rect x="295.93" y="254.04" transform="matrix(0.8976 0.4409 -0.4409 0.8976 145.5914 -106.4894)" 
class="st14" width="12.03" height="12.03"/>
<rect x="279.98" y="249.98" transform="matrix(0.8976 0.4409 -0.4409 0.8976 142.1704 -99.8705)" 
class="st6" width="12.03" height="12.03"/>
<rect x="290.83" y="222" transform="matrix(0.9884 0.1518 -0.1518 0.9884 38.6111 -42.8973)" 
class="st7" width="19.04" height="19.04"/>
<rect x="235.2" y="284.39" transform="matrix(0.9988 0.0483 -0.0483 0.9988 14.4773 -11.4712)" 
class="st6" width="18.46" height="18.46"/>
<rect x="258.71" y="295.04" class="st15" width="30.48" height="30.48"/>
<rect x="182.44" y="265.81" transform="matrix(0.9723 -0.2336 0.2336 0.9723 -60.1883 53.9574)" 
class="st6" width="30.48" height="30.48"/>
</svg>

---

我尝试使用“svg”和“.exp1”，但两者都不起作用。蓝色也只是一个测试值。

您的问题是您的CSS对于主机页本身是全局的。HTML元素表示一个外部资源，它可以按照一个元素的思路进行思考，并拥有自己的内部CSS上下文

不幸的是，您不能使用全局CSS为其中的嵌套元素设置样式-其中的内容本质上是一个单独的网页

您必须选择要使用javascript设置样式的单个SVG元素，并以编程方式应用样式

或者，您可以在Javascript的帮助下，在对象中嵌入带有CSS的标记

在任何情况下，请注意，只有当对象数据属性指向与主机页相同的域时，这些方法才有效

---

编辑：您的SVG看起来没有那么大。只需内联。即使你的页面上有10个大SVG，也只需将它们内联即可。缺点是较小的项目。

您的问题是您的CSS对于主机页本身是全局的。HTML元素表示一个外部资源，它可以按照一个元素的思路进行思考，并拥有自己的内部CSS上下文

不幸的是，您不能使用全局CSS为其中的嵌套元素设置样式-其中的内容本质上是一个单独的网页

您必须选择要使用javascript设置样式的单个SVG元素，并以编程方式应用样式

或者，您可以在Javascript的帮助下，在对象中嵌入带有CSS的标记

在任何情况下，请注意，只有当对象数据属性指向与主机页相同的域时，这些方法才有效

编辑：您的SVG看起来没有那么大。只需内联。即使你的页面上有10个大SVG，也只需将它们内联即可。缺点是规模较小的项目

<object data="path/exp1.svg" type="image/svg+xml" id="svg" width="100%" height="100%"></object>

svg {
  fill: blue !important;
}

.exp0 {
   fill: blue !important;
}