라디오 버튼을 눌러도 색상을 변경할 수없는 이유는 무엇입니까?
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;
}
여기에 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>
div에서 색상 svg를 변경해야합니다. 내가 쓰고있는 내용을 이해 하셨기를 바랍니다. 당신은 시도 할 수 있습니다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>당신은 무엇을 제안합니까?
당신은 DIV 제거하지 마십시오 당신이 대신 이동sofa 내부 섹션 blockDIV합니다.
.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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다