无法覆盖“使用”标记中的类属性

Question

我需要通过添加一个类来更改SVG fill属性。从#fff到#000。我尝试了两种不同的方法。两种方法中的一种我都成功了。相反，我不喜欢我成功使用的方法。

方法1: -成功。

我只是在body标记上添加了一个类，并遍历了svg fill属性。看看下面的代码

​

var button = document.getElementById("btn");
var body = document.body
var count = false;
button.onclick = changeBackground;

function changeBackground() {
  body.classList.toggle('toggle');
}

body {
  background: #3d3d3d;
}

.sheetListWhite {
  fill: #fff;
}

.slBGColor {
  fill: #3d3d3d;
}

.toggle {
  background: #fff;
}

.toggle .sheetListWhite {
  fill: #3d3d3d;
}

.toggle .slBGColor {
  fill: #fff;
}

<svg width="18px" height="18px" viewBox="-2 -2 13 13"> 
    <use xlink:href="#sharedByMe" class="sheetListWhite"></use>
</svg>

<button id="btn"> Change background</button>

<svg style="display:none;">
  <symbol id="sharedByMe">
    <g id="user-(5)">
      <path d="M5.76735992,5.07170748 C6.58617985,4.59194553 7.12018634,3.73525063 7.12018634,2.74147173 C7.12020298,1.23365988 5.8385508,0 4.27211846,0 C2.70568612,0 1.42403394,1.23365988 1.42403394,2.74147173 C1.42403394,3.73525063 1.95804042,4.59196155 2.77686035,5.07170748 C1.35282642,5.58574044 0.284796801,6.78512932 0,8.22439918 L0.712025292,8.22439918 C1.06802962,6.64806134 2.52768396,5.48292744 4.27211846,5.48292744 C6.01655296,5.48292744 7.47620731,6.64804532 7.83221163,8.22439918 L8.54423692,8.22439918 C8.25944012,6.75085832 7.19141051,5.55146944 5.76735992,5.07170748 Z M2.13605923,2.74147173 C2.13605923,1.61062486 3.09729421,0.685371939 4.27211846,0.685371939 C5.44694272,0.685371939 6.40817769,1.61062486 6.40817769,2.74147173 C6.40817769,3.87231861 5.44694272,4.79757153 4.27211846,4.79757153 C3.09729421,4.79757153 2.13605923,3.87231861 2.13605923,2.74147173 Z" id="Shape"></path>
    </g>
    <g id="shared-folder" transform="translate(6.111111, 5.294118)">
      <ellipse id="Oval-6" class="slBGColor" cx="2.44444444" cy="2.35294118" rx="2.44444444" ry="2.35294118"></ellipse>
      <path d="M3.54444101,1.45883032 C3.94870693,1.45883032 4.27777778,1.13170727 4.27777778,0.729415161 C4.27777778,0.327123049 3.94870693,0 3.54444101,0 C3.14017508,0 2.81110424,0.327140144 2.81110424,0.729415161 C2.81110424,0.781778783 2.81720578,0.832655093 2.82779325,0.881924423 L1.89436023,1.34613656 C1.7598169,1.19301186 1.56441282,1.09413129 1.34443069,1.09413129 C0.940181958,1.09411419 0.611111111,1.42125434 0.611111111,1.82352936 C0.611111111,2.22580437 0.940181958,2.55294452 1.34444788,2.55294452 C1.56439563,2.55294452 1.75974815,2.45413233 1.89429148,2.30105891 L2.82781043,2.76516848 C2.81720578,2.81442071 2.81110424,2.86527993 2.81110424,2.91764355 C2.81110424,3.31991857 3.14017508,3.64705871 3.54444101,3.64705871 C3.94870693,3.64705871 4.27777778,3.31993566 4.27777778,2.91764355 C4.27777778,2.51536853 3.94870693,2.18822839 3.54444101,2.18822839 C3.32445888,2.18822839 3.12903762,2.28710896 2.99449429,2.44025076 L2.06104408,1.97615829 C2.07164873,1.92685476 2.07778465,1.87594426 2.07778465,1.82352936 C2.07778465,1.77116573 2.07168311,1.72028942 2.06109564,1.67102009 L2.99452866,1.20680796 C3.12905481,1.35994975 3.32444169,1.45883032 3.54444101,1.45883032 Z" id="Shape"></path>
    </g>
  </symbol>
</svg>

​

见小提琴这里

方法2失败

我没有直接将类添加到body标记中，而是在div上添加了类。

​

var button = document.getElementById("btn");
var body = document.getElementById("check");
var count = false;
button.onclick = changeBackground;

function changeBackground() {
  body.classList.toggle('toggle');
}

div {
  height: 300px;
  width: 100%;
  background: #3d3d3d
}

.sheetListWhite {
  fill: #fff;
}

.slBGColor {
  fill: #3d3d3d;
}

.toggle {
  background: #fff;
}

.toggle .sheetListWhite {
  background: #3d3d3d
}

.toggle .slBGColor {
  fill: #fff;
}

<div id="check">
  <svg width="18px" height="18px" viewBox="-2 -2 13 13"> 
    <use xlink:href="#sharedByMe" class="sheetListWhite"></use>
  </svg>
  <button id="btn"> Change background</button>
</div>

<svg style="display:none;">
  <symbol id="sharedByMe">
    <g id="user-(5)">
      <path d="M5.76735992,5.07170748 C6.58617985,4.59194553 7.12018634,3.73525063 7.12018634,2.74147173 C7.12020298,1.23365988 5.8385508,0 4.27211846,0 C2.70568612,0 1.42403394,1.23365988 1.42403394,2.74147173 C1.42403394,3.73525063 1.95804042,4.59196155 2.77686035,5.07170748 C1.35282642,5.58574044 0.284796801,6.78512932 0,8.22439918 L0.712025292,8.22439918 C1.06802962,6.64806134 2.52768396,5.48292744 4.27211846,5.48292744 C6.01655296,5.48292744 7.47620731,6.64804532 7.83221163,8.22439918 L8.54423692,8.22439918 C8.25944012,6.75085832 7.19141051,5.55146944 5.76735992,5.07170748 Z M2.13605923,2.74147173 C2.13605923,1.61062486 3.09729421,0.685371939 4.27211846,0.685371939 C5.44694272,0.685371939 6.40817769,1.61062486 6.40817769,2.74147173 C6.40817769,3.87231861 5.44694272,4.79757153 4.27211846,4.79757153 C3.09729421,4.79757153 2.13605923,3.87231861 2.13605923,2.74147173 Z" id="Shape"></path>
    </g>
    <g id="shared-folder" transform="translate(6.111111, 5.294118)">
      <ellipse id="Oval-6" class="slBGColor" cx="2.44444444" cy="2.35294118" rx="2.44444444" ry="2.35294118"></ellipse>
      <path d="M3.54444101,1.45883032 C3.94870693,1.45883032 4.27777778,1.13170727 4.27777778,0.729415161 C4.27777778,0.327123049 3.94870693,0 3.54444101,0 C3.14017508,0 2.81110424,0.327140144 2.81110424,0.729415161 C2.81110424,0.781778783 2.81720578,0.832655093 2.82779325,0.881924423 L1.89436023,1.34613656 C1.7598169,1.19301186 1.56441282,1.09413129 1.34443069,1.09413129 C0.940181958,1.09411419 0.611111111,1.42125434 0.611111111,1.82352936 C0.611111111,2.22580437 0.940181958,2.55294452 1.34444788,2.55294452 C1.56439563,2.55294452 1.75974815,2.45413233 1.89429148,2.30105891 L2.82781043,2.76516848 C2.81720578,2.81442071 2.81110424,2.86527993 2.81110424,2.91764355 C2.81110424,3.31991857 3.14017508,3.64705871 3.54444101,3.64705871 C3.94870693,3.64705871 4.27777778,3.31993566 4.27777778,2.91764355 C4.27777778,2.51536853 3.94870693,2.18822839 3.54444101,2.18822839 C3.32445888,2.18822839 3.12903762,2.28710896 2.99449429,2.44025076 L2.06104408,1.97615829 C2.07164873,1.92685476 2.07778465,1.87594426 2.07778465,1.82352936 C2.07778465,1.77116573 2.07168311,1.72028942 2.06109564,1.67102009 L2.99452866,1.20680796 C3.12905481,1.35994975 3.32444169,1.45883032 3.54444101,1.45883032 Z" id="Shape"></path>
    </g>
  </symbol>
</svg>

​

摆弄它这里

现在您可以看到，我不能覆盖以下类.slBGColor，.sheetListWhite

我怎么才能摆脱这个虫子？任何想法。我不想直接使用svg标记，而不想使用use tag。我的意思是我想从外部资源中使用我所有的SVG。任何帮助

谢谢。

Answer 1

<use>的“内部”不能通过<use>元素来处理。它被认为是不透明的/私人的。就浏览器而言，在class="slBGColor"中没有<div>。所以.toggle .slBGColor {}什么也不做。

您可以通过重新设计符号定义本身来使其工作。

例如，如果我对您的示例做了以下两项更改，则符号中的椭圆将根据是否设置“切换”类来更改颜色。

var body = document.body;

.toggle div {
  background: red;

}

https://jsfiddle.net/nuorcj0a/4/

但是，请注意，也会更改页面上对该符号的任何其他引用。