Question

自动scale和svg进入复选框标签的最佳方法是什么？每个svg都有不同的高度和宽度，我不确定使用viewbox是最好的解决方案。

.check__button {
  display: none;
}

.check__icon {
  display: block;
  border: 3px solid;
  width: 70px;
  height: 70px;
  cursor: pointer;
}

.check__fill {
  fill: #9facbc;
}

.check__button:checked+svg .check__fill {
  fill: #737d8b;
}

<label class="check__icon">
  <input class="check__button check__youtube" type="checkbox">
  <svg width="141.176" height="100"  
       xmlns="http://www.w3.org/2000/svg"><defs>
    </defs><path class="check__fill" d="M56.012 68.441l-.006-39.947 38.147 20.041-38.141 19.906zm83.753-46.87s-1.383-9.795-5.612-14.112c-5.37-5.665-11.385-5.691-14.144-6.02C100.253 0 70.62 0 70.62 0h-.065S40.924 0 21.168 1.441c-2.762.327-8.774.353-14.147 6.018C2.788 11.774 1.41 21.57 1.41 21.57S0 33.079 0 44.582v10.789c0 11.505 1.412 23.008 1.412 23.008s1.376 9.797 5.609 14.112c5.373 5.665 12.426 5.488 15.567 6.08 11.294 1.09 48 1.429 48 1.429s29.665-.044 49.42-1.485c2.76-.333 8.774-.36 14.145-6.024 4.232-4.315 5.612-14.112 5.612-14.112s1.411-11.5 1.411-23.008V44.582c0-11.503-1.411-23.011-1.411-23.011z"/>
  </svg>
</label>
<label class="check__icon">
  <input class="check__button check__fiverr" type="checkbox">
  <svg width="100" height="100"
       xmlns="http://www.w3.org/2000/svg"><defs>
    </defs><path class="check__fill" d="M43.75 0a28.156 28.156 0 0 0-28.125 28.125v3.125h-12.5V50h12.5v31.25h-12.5V100h43.75V81.25h-12.5V50h31.426v31.25H53.125V100h43.75V81.25h-12.5v-50h-50v-3.125c0-5.169 4.206-9.375 9.375-9.375h9.375V0H43.75zM75 0a9.375 9.375 0 0 0-9.375 9.375A9.375 9.375 0 0 0 75 18.75a9.375 9.375 0 0 0 9.375-9.375A9.375 9.375 0 0 0 75 0z"/>
  </svg>
</label>

Answer 1

试试此代码

＆＃13;

::selection

＆＃13;

.check__button {
    display: none;
}

.check__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    width: 70px;
    height: 70px;
    cursor: pointer;
    margin-bottom: 10px;
}

.check__fill {
    fill: #9facbc;
    transform: scale(0.4);
}

svg:not(:root){
    width: auto;
    height: 40px;
}

.check__button:checked+svg .check__fill {
    fill: #737d8b;
}

＆＃13;

将svg贴合到不同宽度和高度的标签上

1 个答案: