这是一个远景......我希望在每个 h3 元素之前出现一个 svg 形状，但是它会随着它出现的 div 类改变颜色。我知道我不能通过通过“content”属性引用一个单独的 svg 文件。
有没有办法通过内容属性或其他方式引用内联 svg 来做到这一点？!由于网站上的实际文本将由不会使用 html 的用户编写，我不能简单地在每个 h3 元素之前对其进行硬编码...
谢谢!
最佳答案
很遗憾，这是不可能的。您需要访问 svg 的 stroke 或 fill 属性才能更改颜色。添加到伪元素的 content 属性的图像(例如 content: url(my.svg) 是 generated content，因此应该只被视为平面图像。只有作为伪元素的 'box' 可以通过 css 进行修改。
理想情况下，您会将 svg 内联注入(inject)到 DOM 中。但是，您仍然需要编辑 h3 文本的 color 属性以及 stroke 或 fill svg 的属性也是如此。正如 Paulie_D 在他的评论中提到的，图标字体可以解决这个问题并从 h3 标签继承 color。您甚至可以使用类似 this 的 svg 创建自定义图标字体.
关于css - 在 CSS 伪元素中引用内联 SVG？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29796736/