更改组中其他 svg 元素的颜色

Question

我正在尝试使用 css 在将鼠标悬停在 svg 上时更改其元素的颜色，但也在组中的其他元素悬停时更改同一元素的颜色悬停了。

svg 组的代码是：

<g id="Locations">
        <g id="Viner_Gallery">
            <path id="vinerGalleryQ" fill="#FFFFFF" stroke="#FFFFFF" stroke-    miterlimit="10" d="M281.199,341.615c0,0-1.607,0-16.165,0
                c-8.927,0-16.165-7.237-16.165-16.165c0-8.928,7.237-16.165,16.165-16.165c8.928,0,16.165,7.237,16.165,16.165
                c0,3.792-1.306,7.278-3.492,10.036L281.199,341.615z"/>
            <polygon id="vinerGalleryPoly" fill="#4D4D4D" points="264.973,315.891 255.245,332.141 274.495,332.141       "/>
        </g>
</g>

我想在鼠标悬停时更改#vinerGalleryQ 的颜色，但我也想在鼠标悬停在#vinerGalleryPoly 上时更改#vinerGalleryQ 的颜色。

我试过 jQuery，我更喜欢 css，但我根本做不到 - 显然 jQuery 和 svg 有一些问题？

Answer 1

您可以这样做：

.rect1 {
  fill: red;
}

.rect2 {
  fill: green;
}

g:hover .rect1 {
  fill: orange;
}

<svg>
  <g>
    <rect class="rect1" width="140" height="150"/>
    <rect class="rect2" x="150" width="140" height="150"/>
  </g>
</svg>

更改组中其他 svg 元素的颜色

Changing colour of the other svg element in a group

css

svg

hover