CODEWITHSUNDEEP
csssvgpath
Fifi
Fifi

Reputation: 3605

CSS: change opacity of svg path on hover

I would like to change opacity of an inline SVG path from CSS. Here is the code :

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>

As you'll notice, it works with the circle, but not with the path. My questions are:

Upvotes: 0

Views: 888

Answers (2)

mhhabib
mhhabib

Reputation: 3121

Remove pointer-events="none" then it will work fine. Pointing none The element does not react to pointer events. Hence it doesn't work.

See details

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"   >
    <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>

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 123985

  • The path inherits pointer-events="none" from its parent.

  • The circle doesn't because it overrides that parent pointer-events value.

If you want something to respond to mouse events, don't have it set it as pointer-events none.

Upvotes: 3

Related Questions