How do i click on an svg shape and it changes colour

Answer 1

try to use the javascript onclick event

Answer 2

Use class or id in shape tag like <rect id="colorchange" ....... > then do hover effect on class simple. But hear you should use fill:green; in hover effect in place of background-color.

Answer 3

BALOOCH ANZARAHMEDKHAN ZAKIRAHMEDKHAN that could work, but since Dennis wants the event to occur when you click, and not when you go with your mouse over the svg, its better to use onclick

Answer 4

Roel he can use active in place of hover by giving the link # in href.

Answer 5

BALOOCH ANZARAHMEDKHAN ZAKIRAHMEDKHAN thats true, unless he wants a javascript function to occur

Answer 6

Roel yah js is good but it need some more skills 😊

Answer 7

BALOOCH ANZARAHMEDKHAN ZAKIRAHMEDKHAN Yeah🙂

Answer 8

use the css :active since you only want to change its color
something like this
#idname:active
{
/*codeblock for css*/
}

Answer 9

Or may use visited in place of active.

Answer 10

but visited (i guess) stays true if clicked once

Answer 11

ok good luck

Answer 12

conclusion?!js or basic svg

Answer 13

let me try...

Answer 14

// using jQuery
// replace #shape with whatever id your shape has
// You can also add/remove elements from the colors array

var colors = ["red","green","blue"];
var i = 0;

$(function() {
$("#shape").click(function() {
i++;
if (i == colors.length) i = 0;
$("#shape").css("background-color", colors[i]);
});
});