在CSS和/或javascript中更改SVG颜色（带有对象标记）不会执行任何操作

我知道如果您使用和img标签，则无法使用css更改svg的颜色，而是应该使svg内联，但是在我的情况下，我有多个大型svg，并且我想使用javascript动态更改颜色，因此使它们内联不是我的最佳选择。

然后，我读到有关使用对象标记的信息，因为它应该可以工作，但就我而言，这不是可行的。

我读过其他一些问题，但对我没有帮助：如何使用Javascript访问SVG元素

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>

HTML：

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

我知道我说过我想用JavaScript动态更改它们，但是即使在CSS中使用'！important'更改它们也不起作用。

的CSS

svg {
  fill: blue !important;
}

.exp0 {
   fill: blue !important;
}

我尝试使用'svg'和'.exp1'，但是它们都不起作用。（蓝色也是一个测试值）。