$0.42

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 an SVG file. At the moment, I use javascript to set an attribute to an id. This seems only to change one of the elements.

I have tried inline with SVG using onclick. It didn´t seem to work. So I started with javascript. Now, it fills only one triangle, 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.

add comment

0 Answer

Your Answer