css - CSS：在悬停时更改 svg 路径的不透明度

Question

我想从 CSS 更改内联 SVG 路径的不透明度。这是代码：

canvas { background-color:#777;}

svg { position:absolute; top: 0px;left:0px;}

#circle:hover {opacity: 0.9;}
#square:hover {opacity: 0.9;}

<canvas width="300px" height="300px"></canvas>

<svg height="300" width="300" pointer-events="none"  >
    <circle id="circle" cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="red" pointer-events="all" opacity="0.3"/>
    <path id="square" d="M150 150 H 250 V 250 H 150 L 150 150" opacity="0.3"/>
</svg>

您会注意到，它适用于圆圈，但不适用于路径。我的问题是：

• 为什么它不适用于路径？
• 我应该怎么做才能将悬停不透明度应用于路径？

标签： csssvgpath

Answer 1

• 该路径从其父路径继承 pointer-events="none"。

• 圆圈没有，因为它覆盖了父指针事件值。

如果您希望某些东西响应鼠标事件，请不要将其设置为无指针事件。