如果我正在更改第二组元素的填充颜色,那么我在 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>
答案 0 :(得分:2)
您的示例代码按预期工作,它将第一个元素设置为红色,第二个为绿色。但是,由于这些项目重叠、不透明且没有空格,因此仅显示顶部(第 2 个)元素。
要查看它是否有效,您可以尝试:
fill:green
替换为 fill: rgba(123,123,123,0.5)
答案 1 :(得分:0)
我认为问题在于第二个元素被第一个元素覆盖。您可以简单地使用 css z-index
属性。您希望显示在顶部的元素的 z 索引应高于其他元素的 z 索引。
答案 2 :(得分:0)
你可以这样做:
svg g:nth-child(2) path{
fill:Yellow;
}