尝试使用javascript更改多个svg路径

Trying to use javascript to change multiple svg paths

本文关键字：svg 路径 javascript      更新时间：2023-10-31

好了，伙计们！我目前正在尝试在几个svg中更改多个类的填充颜色。我没有得到想要的结果。我将在下面显示我的代码。

这是Javascript

<script>
function secondary(color)
{
document.getElementsByClassName("secon").style.fill = color;
}
</script>

下面是其中一个按钮的样子：D

<label>
<input type="radio" id="42" name="45" mandatory="1" 
onClick="secondary('#0066ff'); myFunction('A Vibrant Blue');" />
<img src="/pictures/Color Tiles/CunningBlue.png" alt="Cunning Blue"
border="0" /><span class="textcolor">Cunning Blue</span></div>
</label>

最后是SVG GOODIES<3

<svg id="04246c25-b9d2-4d07-aadf-1f6435a119c7" data-name="Layer 2"
xmlns="http://www.w3.org/2000/svg" width="191.05" height="300.77" viewBox="0  
0 191.05 300.77">
<title>Marble</title>
<g>
<path d="M141.41,70.09c14.72-8.66,53.25-24.24,53.25-24.24l13,4.33s-
28.57,11.69-40.26,24.24-4.76,14.72-22.08,22.51-45.45,2.6-51.52,0,11.69- 
16.45,16.88-16.45S141.41,70.09,141.41,70.09Z" transform="translate(-82.04
-4.05)" style="fill: #fff"; class="secon" />
<path d="M222.36,94.33s-9.09,2.16-14.72,0-2.6-11.69-7.79- 
9.52S193.79,102.55,189,106s-11.26,7.79-15.58,9.52-7.79,23.38,0,13.85,7.36-
11.26,15.15-16,10.82-13.41,19-12.33,22.08,2.38,25.54-
2.38S222.36,94.33,222.36,94.33Z" transform="translate(-82.04 -4.05)"
style="fill: #fff"; class="secon" />
<path d="M132.32,12.08s-3,13.42,4.33,19.48,25.16,7.79,13.45,12.12-13,16.88-
29.9,13.42S115,32.42,116.73,25.5,132.32,12.08,132.32,12.08Z" 
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M168.22,20.11c-8.35-.43-13.84,1.06-18.72-1.3-2.11-1-5.65-9.52-8.68- 
12.12s11.69-4.33,20.35,0S168.22,20.11,168.22,20.11Z" 
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M134.48,137.62c5.63,5.19,21.21,17.32,29.44,16s20.31,1.3,17.08,7.79-
19.21,11.69-27,9.52-10.31-13.42-21.4-13.42S134.48,137.62,134.48,137.62Z" 
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M231.88,141.08a154.39,154.39,0,0,1-20.35,7.79c-8.23,2.6-14.29,2.16-
12.55,7.79s11.26,11.69,20.35,7.36,20.35-8.66,29-
15.15S231.88,141.08,231.88,141.08Z" transform="translate(-82.04 -4.05)"
style="fill: #fff"; class="secon" />
<path d="M215.43,232.86c-8.23,1.73-8.66,9.09-27.27,6.06s-23.56-11.69-19.35-
13.85,11.13-1.3,18.92-7.36,6.33-13.85,11-
13.85,10.69,7.79,21.08,10.82S215.43,232.86,215.43,232.86Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M128.1,187.84s16.82,9.09,22,7.36,19-11.26,22.92-
10,5.19,4.33,0,10.18-12.28,15.8-18,15.8-18.22-2.6-22.38- 
4.33S128.1,187.84,128.1,187.84Z" transform="translate(-82.04 -4.05)"
style="fill: #fff"; class="secon" />
<path d="M106.77,245.84c5.63,1.73,22.08,10,30.3,8.23s30.3-
1.3,34.2,3.46,10.39,6.49,16.88,6.06,26.84,0,16.88,4.33-14.79,6.49-
28.61,7.79-20.31,3.9-31.56-2.6-16-7.79-22.94-8.66-1.3,6.93-
15.15-.43A117.46,117.46,0,0,1,82.1,245.84h24.68Z" 
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M255.26,257.1s-16-3.46-25.11-5.63-17.75-3.9-22.51-
2.16,4.33,4.76,13,6.06,27.71,9.09,36.36,8.23S255.26,257.1,255.26,257.1Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M266.52,286.54a32.73,32.73,0,0,0-19-3.9c-10.82.87-23.81,3-
30.74,6.49s-18.18,6.93-26.41,6.93-21.16.87-
21.4,2.6,0.55,6.93,7.51,6.06S202,302.55,206.33,303s17.76,0.87,24.69,0,13.59-
6.93,19.13-7.79,12.47,4.33,20.26.43S266.52,286.54,266.52,286.54Z" 
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" >
<path d="M82.1,286.54s12.12,1.3,18.18,0,18.61-4.33,22.94-
2.16,6.16,5.19,9.36,6.06,14.94,3.9,8.42,5.19-13.45,6.06-19.94,5.19-21.21-
3.46-30.74-3.9S82.1,286.54,82.1,286.54Z" transform="translate(-82.04 -4.05)" 
style="fill: #fff"; class="secon" />
</g>
</svg>
</div>

在这个话题上的任何帮助都将不胜感激。

getElementsByClassName返回包含该类的元素的数组。

因此，您必须迭代该数组，在每个元素上设置样式。

function secondary(color) {
    var elements = document.getElementsByClassName("secon");
    for (var i = 0; i < elements.length; i++)
        elements[i].style.fill = color;
}

我很快在这里测试了一下，这就解决了问题。

相关文章：