在css中嵌入SVG的路径中使用类

我目前正在玩一些嵌入一些基本的SVG作为数据URI与我的CSS内嵌 - 类似于所讨论的here。在css中嵌入SVG的路径中使用类

所有这一切工作，除了当我尝试和具有靶向内路径之一的一类精细：现在这似乎

.alter { 
    fill:red; 
} 
.caretDown { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 10.07h-5.656l5.656-5.656v5.656z' class='alter' /%3E%3C/svg%3E"); 
}

并不工作，但如果我这样做，因为在一个普通的SVG我HTML它工作正常：

<body> 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> 
     <path d="M11 10.07h-5.656l5.656-5.656v5.656z" class="alter"/> 
    </svg> 
</body>

最终我试图嵌入SVGs以这种方式让我可以把它们作为背景图片（似乎工作更好地与文本内联的时候），我想控制通过一个类，让我可以通过切换目标/作用域选择器来改变颜色（whe再dark和light应用于身体为题材）：

.dark .alter { 
    fill:red; 
} 
.light .alter { 
    fill:red; 
}

我身边有这是为什么不工作的一些理论，但我无法找到任何具体为何。

来源

2016-07-29 anthonyv

你最终找到解决办法？我面临着同样的难题。我可以找到的所有解决方案都建议使用背景颜色遮罩，但如果您需要多种颜色，则无法提供帮助。 http://stackoverflow.com/a/16358386/4946681 – Nate

如果您使用像SASS这样的CSS预处理器，您可以编写一个小函数，在该函数中传递填充颜色并返回SVG，并将颜色作为填充。

@function caret-down-icon-svg($fill: '111') { 
    @return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 10.07h-5.656l5.656-5.656v5.656z" fill="#{$fill}"/></svg>'; 
} 

.caretDown { 
    background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg)}"); 

    &.light { 
    background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg, ccc)}"); 
    } 
}

Here's the Pen

来源

2016-07-29 18:43:23 Chris

雅我想到了这一点，但最终它复制了我的CSS中的SVG，并最终使我需要发送的字节翻倍。 – anthonyv

回答

相关问题