How to make all elements in groups of svg change color onclick (js)

Ask a question
1

I want to change the fill (onclick) of all elements in a group from a svg file. At the moment, I use javascript to set an attribute to an id. This seems to only change one of the elements.

I have tried inline of svg using onclick. it didn´t seem to work. So i started with javascript. Now, it fills only one trianlge, whilst I set the function to call from the group.

function callred(){
  document.getElementById('btn1').setAttribute('fill', '#ff00ff');
}
#svg-object{

        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;

}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
    <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131     "/>
    <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656     "/>
    <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656     "/>
    <polygon points="366.699,581 410,656 453.301,581     "/>
</g>


</svg>

I expect all elements in the group to change to another color when clicked on any element of the group and for them to stay this color.

Coin iconoffer bounty
add comment

0 Answer

Your Answer