在 CSS 伪元素中引用内联 SVG？

Question

这是一个长镜头......我希望在每个 h3 元素之前出现一个 svg 形状，但它会随着它出现的 div 的类而改变颜色。我知道我不能这样做通过“内容”属性引用单独的 svg 文件。

有没有办法通过引用内联 svg 来做到这一点 - 通过 content 属性或其他方式？！由于网站上的实际文本将由无法使用 html 的用户编写，因此我不能简单地在每个 h3 元素之前对其进行硬编码...

谢谢！

Answer 1

很遗憾，这是不可能的。您需要访问 svg 的 stroke 或 fill 属性来更改颜色。添加到伪元素的content 属性的图像（例如content: url(my.svg) 是generated content，因此应该只将其视为平面图像。只有作为伪元素的“盒子”才能通过css修改.

理想情况下，您会将 svg 内联注入 DOM。但是，您仍然需要编辑 h3 文本的 color 属性以及 svg 的 stroke 或 fill 属性。正如 Paulie_D 在他的评论中提到的，图标字体可以解决这个问题并从 h3 标签继承 color。您甚至可以使用 this 之类的 svg 创建自定义图标字体。