使用鏈接標記覆蓋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>

Answer 2

你是做沒事剛剛結束的<div class="overwrite">有點早。剛剛結束</div>標籤在年底:)

.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> 
 
    
 

 

 

 

 
<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> 
 
    </div>