使用标签填充 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>