使用標簽填充 SVG

Question

我正在嘗試使用<svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>更改不同頁面上顯示的 SVG 的顏色。

我正在嘗試的方法在這里： https ://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/。

這是我要引入的 SVG symbol （縮短為相關部分）：

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="kmc-logo" viewBox="0 0 151 151">
        <g id="logo">
            <g id="outer-circle">
                <path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M11.51 ..."/>
            </g>
            <g id="ceramics">
                <path stroke="none" d="M39.47 ..."/>
            </g>
        </g>
    </symbol>
</svg>

我的樣式表中有這種樣式：

#masthead > .content-width .site-branding .logo--white a #logo-svg {
    fill: #fff;
    stroke: #fff;
}

這里的stroke顏色對於上面的 shadow-dom'd SVG 中的#outer-circle效果很好，但是填充在#ceramics內部的路徑上不起作用。

任何人都可以解釋一下嗎？ 提前致謝！

編輯：在發現問題不在於 css 特異性，而在於 shadow-dom svgs 中的樣式元素后，我更新了這個問題。

Answer 1

事實上，解決方案對您來說非常簡單。 只需將svg文件中的所有位置從fill = "none"更改為fill = "currentColor" 。 在這種情況下， svg元素內的所有填充屬性都從包裝它的父元素繼承顏色。 然后將顏色屬性添加到父元素。

 .logo-svg { color: #fff; } .logo-svg--yellow { color: yellow; }

 <svg class="logo-svg"> <use href="#some-svg" xlink:href="#some-svg" /> </svg> <svg class="logo-svg--yellow"> <use href="#some-svg" xlink:href="#some-svg" /> </svg> <svg id="some-svg" width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="currentColor" /> </svg>

感謝您上面的問題和回答，我通過進行我描述的更改解決了我的問題。

升級版。 根據新規定，

而不是 xlink:href 你應該使用href

Answer 2

你做了什么似乎沒關系。 我在下面粗略地復制了它。 也許這會對你有所幫助。

如果你的“陶瓷”路徑沒有顯示出來，那么它可能會出現問題。 但我們需要看到它。

 body { background-color: blue; } .logo--white #logo-svg { fill: #fff; stroke: #fff; } .logo--yellow #logo-svg { fill: #ff0; stroke: #ff0; } div { width: 100px; height: 100px; margin: 20px; } 

 <svg width="0" height="0"> <symbol id="kmc-logo" viewBox="0 0 151 151"> <g id="logo"> <g id="outer-circle"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M 25,25 L 25,125"/> </g> <g id="ceramics"> <path stroke="none" d="M 100,25 A 50,50 0 0 0 100,125 A 50,50 0 0 0 100,25 Z"/> </g> </g> </symbol> </svg> <div class="logo--white" viewBox="0 0 151 151"> <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg> </div> <div class="logo--yellow" viewBox="0 0 151 151"> <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg> </div>