css - 使用链接标记覆盖 SVG DOM

Question

我正在使用 use 标签显示我的 SVG。我将所有 fill 属性放在一个单独的类中。在某些情况下，我将需要更改 SVG 元素的颜色。但无法改变颜色。不知道我犯了什么错误。

.red{
  fill:red;
}
.overwrite .red{
  fill:blue;
}

<div class="overwrite">
  <svg width="18" height="18" viewBox="0 0 18 18">
    <use xlink:href="#owned"></use>
  </svg>
</div>




<svg width="18" height="18" viewBox="0 0 18 18"  style="display:none" ><g id="owned" class="red">
    <path d="M10.3841197,9.97075733 L13.2351431,11.4015266 C14.9626648,11.9616921 15.8309505,12.9557364 15.9891455,14.4719879 C16.0178014,14.7466403 15.8183819,14.9925193 15.5437298,15.0211745 C15.5264933,15.0229729 15.5091749,15.0238739 15.4918448,15.0238739 L2.51884261,15.0238739 C2.24273586,15.0238522 2.01888584,14.7999955 2.01888584,14.5238739 C2.01888584,14.5045273 2.0200088,14.4851971 2.02224906,14.4659807 C2.19872996,12.9521713 3.06467543,11.9595935 4.69306731,11.4301408 L7.61375396,9.97075733 L7.1652223,9.07699038 L4.31419892,10.5077596 C2.39480463,11.1258644 1.25218198,12.4355796 1.02897609,14.3501842 C1.02225492,14.4078368 1.01888584,14.4658309 1.01888584,14.5238739 C1.01888584,15.3522606 1.69041424,16.023809 2.51880347,16.0238739 L9.09090532,16.0238739 L15.4918448,16.0238739 C15.543835,16.0238739 15.59579,16.0211709 15.6474995,16.0157759 C16.4714553,15.9298101 17.0697142,15.1921727 16.9837468,14.3682171 C16.7828597,12.4427753 15.6331205,11.126513 13.6120656,10.4785171 L10.8326513,9.07699038 L10.3841197,9.97075733 Z"/>
    <path d="M11.9769889,4.48241206 C11.9769889,2.54800219 10.807176,1.5 8.97698892,1.5 C7.12089292,1.5 5.97698892,2.53355002 5.97698892,4.48241206 C5.97698892,6.87094598 7.51565932,9.5 8.97698892,9.5 C10.4383185,9.5 11.9769889,6.87094598 11.9769889,4.48241206 Z M12.9769889,4.48241206 C12.9769889,7.3505461 11.1337512,10.5 8.97698892,10.5 C6.82022662,10.5 4.97698892,7.3505461 4.97698892,4.48241206 C4.97698892,1.9573661 6.58996061,0.5 8.97698892,0.5 C11.3364486,0.5 12.9769889,1.96971351 12.9769889,4.48241206 Z"/>
  </g>
</svg>

引用上面附上的示例代码

PS:检查 .overwrite 类没有工作。

引用fiddle

Answer 1

use 标签通常会创建影子根。您无法访问影子根内的类。而是尝试添加类 .red 以使用标签。

.red{
  fill:red;
}
.overwrite .red{
  fill:blue;
}

<div class="overwrite">
  <svg width="18" height="18" viewBox="0 0 18 18">
    <use xlink:href="#owned"  class="red"></use>
  </svg>
</div>


<svg width="18" height="18" viewBox="0 0 18 18" style="display:none">
  <g id="owned">
    <path d="M10.3841197,9.97075733 L13.2351431,11.4015266 C14.9626648,11.9616921 15.8309505,12.9557364 15.9891455,14.4719879 C16.0178014,14.7466403 15.8183819,14.9925193 15.5437298,15.0211745 C15.5264933,15.0229729 15.5091749,15.0238739 15.4918448,15.0238739 L2.51884261,15.0238739 C2.24273586,15.0238522 2.01888584,14.7999955 2.01888584,14.5238739 C2.01888584,14.5045273 2.0200088,14.4851971 2.02224906,14.4659807 C2.19872996,12.9521713 3.06467543,11.9595935 4.69306731,11.4301408 L7.61375396,9.97075733 L7.1652223,9.07699038 L4.31419892,10.5077596 C2.39480463,11.1258644 1.25218198,12.4355796 1.02897609,14.3501842 C1.02225492,14.4078368 1.01888584,14.4658309 1.01888584,14.5238739 C1.01888584,15.3522606 1.69041424,16.023809 2.51880347,16.0238739 L9.09090532,16.0238739 L15.4918448,16.0238739 C15.543835,16.0238739 15.59579,16.0211709 15.6474995,16.0157759 C16.4714553,15.9298101 17.0697142,15.1921727 16.9837468,14.3682171 C16.7828597,12.4427753 15.6331205,11.126513 13.6120656,10.4785171 L10.8326513,9.07699038 L10.3841197,9.97075733 Z"/>
    <path d="M11.9769889,4.48241206 C11.9769889,2.54800219 10.807176,1.5 8.97698892,1.5 C7.12089292,1.5 5.97698892,2.53355002 5.97698892,4.48241206 C5.97698892,6.87094598 7.51565932,9.5 8.97698892,9.5 C10.4383185,9.5 11.9769889,6.87094598 11.9769889,4.48241206 Z M12.9769889,4.48241206 C12.9769889,7.3505461 11.1337512,10.5 8.97698892,10.5 C6.82022662,10.5 4.97698892,7.3505461 4.97698892,4.48241206 C4.97698892,1.9573661 6.58996061,0.5 8.97698892,0.5 C11.3364486,0.5 12.9769889,1.96971351 12.9769889,4.48241206 Z"/>
  </g>
</svg>