Hi, i want to write a program so that when i touch the svg shape, it become red but it is not work please help ...

Question

<svg width="200" height="200">
<circle cx="100px" cy="100px" r="50"
fill="green"/>
</svg>

svg:hover {
color: red
}

Answer 1

The property to colour svg element isn't the same as for html elements ^^
You should know it, because you use it: fill='green' in the <circle> svg element...

Well so, your css rule must become:

svg:hover { fill:red; }

... as well as the :active pseudo-class instead or in combination.

However, your css rule target all the content box ( display zone ) from the <svg> tag: if you have more than one child inside the <svg> tree, you will fill them all... You can and should target more specific elements... especially if you want the touch/click be reacting only on shape ( actually with your code,, click/touch beside shape but in svg box fill the circle in red ^^ ).

Check the link below, I made a test-explain page for the occasion:
https://code.sololearn.com/Wq2bwzSxSnjl/#css

Answer 2

Try this

svg:active {
color:red;
}