Question

如果我正在更改第二组元素的填充颜色，那么我在 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>

Answer 1

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

要查看它是否有效，您可以尝试：

删除翻译以便可以看到两个彩色块
使用 Alpha 通道将不透明填充更改为一个，使其略微透明也会同时显示这两个项目（尝试将 fill:green 替换为 fill: rgba(123,123,123,0.5)

Answer 2

我认为问题在于第二个元素被第一个元素覆盖。您可以简单地使用 css z-index 属性。您希望显示在顶部的元素的 z 索引应高于其他元素的 z 索引。

Answer 3

你可以这样做：

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

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

3 个答案: