How to change color SVG through Input radio?

Question

Why can't change the color when press the button radio?

CSS:

.block{
text-align: center;
}
.sofa {
  width: auto;
  background: url("white.png") no-repeat;
  background-size: 100% auto;
  margin:20px;
}
.sofa svg {
  mix-blend-mode: multiply;
}
label {
  display: inline-block;
  width:25px;
  height: 25px;
  cursor: pointer;
  left: 50%;
}
label.red {
  background:red;
}
label.green {
  background:green;
}
label.purple {
  background:purple;
}
.cls-1 {
  fill:red;
}
#red-radio:checked ~ .sofa .cls-1 {
  fill:red;
}
#green-radio:checked ~ .sofa .cls-1 {
  fill:green;
}
#purple-radio:checked ~ .sofa .cls-1 {
  fill:purple;
}
input[type="radio"] {
  visibility: hidden;
}

Here need div. When to remove the <div>...</div> and it worked.

<div class="block">
  <input type="radio" name="color" id="red-radio">
    <label  for="red-radio" class="red"></label>
  <input type="radio" name="color" id="green-radio">
    <label for="green-radio" class="green"></label>
  <input type="radio" name="color" id="purple-radio">
     <label  for="purple-radio" class="purple"></label>
</div>

SVG:

<div class="sofa">
  <svg viewBox="0 0 1920 1080">
    <path id="Name" data-name="Name" class="cls-1" d="M539,0H825c1.269,24.045,8.846,47.04,12,70H552a2.84,2.84,0,0,0-1-1C550.4,45.249,541.131,22.878,539,0Z"/>
  </svg>
</div>

I need to work to change the color svg on div. I hope you understand what I'm writing about. You can try Run code snippet

.block {
  text-align: center;
}

.sofa {
  width: auto;
  background: url("white.png") no-repeat;
  background-size: 100% auto;
  margin: 20px;
}

.sofa svg {
  mix-blend-mode: multiply;
}

label {
  display: inline-block;
  width: 25px;
  height: 25px;
  cursor: pointer;
  left: 50%;
}

label.red {
  background: red;
}

label.green {
  background: green;
}

label.purple {
  background: purple;
}

.cls-1 {
  fill: red;
}

#red-radio:checked~.sofa .cls-1 {
  fill: red;
}

#green-radio:checked~.sofa .cls-1 {
  fill: green;
}

#purple-radio:checked~.sofa .cls-1 {
  fill: purple;
}

input[type="radio"] {
  visibility: hidden;
}

<div class="block">
  <input type="radio" name="color" id="red-radio">
  <label for="red-radio" class="red"></label>
  <input type="radio" name="color" id="green-radio">
  <label for="green-radio" class="green"></label>
  <input type="radio" name="color" id="purple-radio">
  <label for="purple-radio" class="purple"></label>
</div>

<div class="sofa">
  <svg viewBox="0 0 1920 1080">
    <path id="Name" data-name="Name" class="cls-1" d="M539,0H825c1.269,24.045,8.846,47.04,12,70H552a2.84,2.84,0,0,0-1-1C550.4,45.249,541.131,22.878,539,0Z"/>
  </svg>
</div>

What do you suggest?

Does this answer your question? [How to change the color of an svg element?](https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element) — Simone Rossaini, Aug 24 '20 at 11:52

Rayees AC · Accepted Answer · 2020-08-24T11:58:10.077

You don't remove div instead of you move the sofa section inside the block div.

.block {
    text-align: center;
    }
    
    .sofa {
      width: auto;
      background: url("white.png") no-repeat;
      background-size: 100% auto;
      margin:20px;
    }
    
    .sofa svg {
      mix-blend-mode: multiply;
    }
    
    label {
      display: inline-block;
      width:25px;
      height: 25px;
      cursor: pointer;
      left: 50%;
    }
    
    label.red {
      background:red;
    }
    
    label.green {
      background:green;
    }
    
    label.purple {
      background:purple;
    }

    #red-radio:checked ~ .sofa circle {
      fill:red;
    }
    
    #green-radio:checked ~ .sofa circle {
      fill:green;
    }
    
    #purple-radio:checked ~ .sofa circle {
      fill:purple;
    }
    
    input[type="radio"] {
      visibility: hidden;
    }

<div class="block">
  <input type="radio" name="color" id="red-radio">
    <label  for="red-radio" class="red"></label>
  <input type="radio" name="color" id="green-radio">
    <label for="green-radio" class="green"></label>
  <input type="radio" name="color" id="purple-radio">
    <label  for="purple-radio" class="purple"></label>
  <div class="sofa">
    <svg viewBox="0 0 200 200">
      <circle cx="60" cy="60" r="50"/>
    </svg>
  </div>
</div>

score 3 · Answer 2 · answered Aug 24 '20 at 11:54

Works fine if you put .sofa on the same level than yours input (so in the div.block) and if you remove the inexistant cls-1 class:

.block {
  text-align: center;
}

.sofa {
  width: auto;
  background: url("white.png") no-repeat;
  background-size: 100% auto;
  margin: 20px;
}

.sofa svg {
  mix-blend-mode: multiply;
}

label {
  display: inline-block;
  width: 25px;
  height: 25px;
  cursor: pointer;
  left: 50%;
}

label.red {
  background: red;
}

label.green {
  background: green;
}

label.purple {
  background: purple;
}

#red-radio:checked~.sofa {
  fill: red;
}

#green-radio:checked~.sofa {
  fill: green;
}

#purple-radio:checked~.sofa {
  fill: purple;
}

input[type="radio"] {
  visibility: hidden;
}

<div class="block">
  <input type="radio" name="color" id="red-radio">
  <label for="red-radio" class="red"></label>
  <input type="radio" name="color" id="green-radio">
  <label for="green-radio" class="green"></label>
  <input type="radio" name="color" id="purple-radio">
  <label for="purple-radio" class="purple"></label>

  <div class="sofa">
    <svg viewBox="0 0 200 200">
      <circle cx="60" cy="60" r="50" />
    </svg>
  </div>
</div>

No problem ;) Keep in mind that you don't need to specify the `circle` css selector. — johannchopin, Aug 24 '20 at 17:32

How to change color SVG through Input radio?

2 Answers2