塗りつぶしたい幾何学的形状があります。
マウスが各領域の上に置かれたときに、ここに描かれているように塗りつぶしたいと思います.
残念ながら、残りの図形を追加すると、ブラウザが残りの図形を覆う境界ボックスを各図形に与えるため、コードが機能しません。ボックスではなく、svgのマウスオーバー形状を正確にするにはどうすればよいですか?
これが私のHTMLコードです：
<object data="images/logo/middle.svg"
type="image/svg+xml" class="middlesvg hoversvg" > <!-- only the middle is shown for brevity -->
</object>
CSS
.hoversvg
{
opacity: 0;
}
.hoversvg:hover{
opacity: 1;
}