SVG-Path-Farbe mit Klick auf Button ändern

Hallo, hier ist mein Code: https://codepen.io/nicerboy/pen/ZgBRRz Leider schaffe ich es nicht, dass sich .cls2 und .cls3 bei Klick auf den roten Button einfärben. (Die weiße Form im Hintergrund brauche ich noch.) Wie kann man das machen? Liebe Grüße

Der hier verwendete Code

<style> #all{ display:flex; } [type=checkbox]{ position:fixed; top:0; left:-2000px; } label{ height: 20px; width: 20px; background-color: red; cursor: pointer; border:2px solid lightgrey; margin-left: 10px; order:2; } .icon { width: 80px; display: inline-block; position: relative; vertical-align: top; } #check:checked~div > svg{ fill:red; } .icon svg { position: absolute; width: 80px; left: 0; top: 0; opacity: 0; } .icon svg#frame1 { animation: ani 6s infinite; } .icon svg#frame2 { animation: ani 6s infinite; animation-delay: 2s; } .icon svg#frame3 { animation: ani 6s infinite; animation-delay: 4s; } @keyframes ani { 0% { opacity: 1; } 30% { opacity: 1; } 40% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body translate="no" > <div id="all"> <label for="check"></label> <input id="check" type="checkbox"> <div class="icon"> <svg id="frame1" viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/><path class="cls-3" d="M42.05,49.65c-2.75,2.93-4.24,4-6.6,5a12.2,12.2,0,0,1-4.23.82,8.61,8.61,0,0,1-7.46-4.09c-1.4-2.5-2-5.87-2-10.64,0-9.81,3-15,8.67-15a9.3,9.3,0,0,1,6.26,2.65c2.07,1.83,3.17,3.42,4.81,7h1.15v-11H41.37c-.72,1.68-1.15,2.17-2.11,2.17a6.74,6.74,0,0,1-2.17-.63,18.13,18.13,0,0,0-7.27-1.69c-9.38,0-16.41,7.22-16.41,17s6.88,16.56,16.7,16.56c5.39,0,8.62-1.69,13.38-6.89l-1.44-1.2Z" transform="translate(0 0)"/></svg> <svg id="frame2" viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/><path class="cls-3" d="M44.6,25H34.54v1.15c3.42.24,4.09.63,4.09,2.12,0,.77-.1,1-1,3.32l-6,15.5L25.15,31.31c-.86-2.12-1.06-2.7-1.06-3.37,0-1.11.73-1.59,2.51-1.68.24-.05.86-.05,1.54-.15V25H12.3v1.15c2.36.39,2.79.72,3.95,3.32L28.33,57.69h1.25L40.36,30c1.16-2.94,1.78-3.51,4.24-3.9V25Z" transform="translate(0 0)"/></svg> <svg id="frame3" viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/></svg> </div> </div> </body>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!