javascript - 在 CSS 和/或 javascript 中更改 SVG 颜色（带有对象标签），不会做任何事情

Question

我知道如果你使用和 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' 但它们都不起作用。（蓝色也只是一个测试值）。

标签： javascripthtmlcsssvg

Answer 1

您的问题是您的 CSS 对于主机页面本身来说是全局的。HTML <object>元素代表一个外部资源（按照 的思路思考<iframe />）并有自己的内部 CSS 上下文。

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

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

或者，您可以在 Javascript 的帮助下在对象中嵌入<style>带有 CSS 的标签。

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

编辑：您的 SVG 似乎没有那么大。只需内联它。即使您的页面上有 10 个大 SVG，也只需将它们内联即可。对于较小的项目，缺点并不大。