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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>