如何更改svg组元素的填充颜色？_Svg

如何更改svg组元素的填充颜色？

svg

如何更改svg组元素的填充颜色？,svg,Svg,我在svg中遇到了一些问题，若我改变了第二组元素的填充颜色，那个么它也改变了第一个g元素的填充颜色。两者处于相同的位置。有没有办法在不改变第一个g元素填充颜色的情况下改变第二个g元素的颜色 <svg width="100%" height="100%">  <g> <g transform="translate(50,50)">

我在svg中遇到了一些问题，若我改变了第二组元素的填充颜色，那个么它也改变了第一个g元素的填充颜色。两者处于相同的位置。有没有办法在不改变第一个g元素填充颜色的情况下改变第二个g元素的颜色

<svg width="100%" height="100%">

  <!-- draw rectangle -->
  <g>
  <g transform="translate(50,50)">
    <path d="M0,0 150,0 150,50 0,50" style="fill:red;" />
  </g>
    <g transform="translate(50,50)">
    <path d="M0,0 350,0 350,100 0,150" style="fill:green;" />
  </g>
  </g>
</svg>

我认为问题在于第一个元素涵盖了第二个元素。您可以简单地使用css

z-index

属性。要显示在顶部的元素的z索引应高于另一个元素的z索引。

示例代码按预期工作，它将第一个元素设置为红色，第二个元素设置为绿色。但是，由于这些项目重叠、不透明且没有空格，因此仅显示顶部（第二个）的元素

要确保其有效，您可以尝试：

删除“平移”，以便可以看到两个彩色块
将不透明填充更改为带有alpha通道的填充，使其略微透明，也将显示这两个项目（尝试将
```
fill:green
```
替换为
```
fill:rgba（123123,0.5）
```

svg g:nth-child(2) path{
  fill:Yellow;
}