Question

我正在尝试使用css在svg悬停时更改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元素的颜色

1 个答案: