可以在元素之前添加SVG：：并访问笔划和填充吗？

Question

是否可以像这样在CSS中添加一个之前的元素：

    ul {
        li:before {
            content: url('../icons/fancy-symbol.svg');
        }
    }

并访问svg的对象(例如，特定的线条或矩形)和属性(例如，描边宽度、删除线和填充颜色)？

或者是否有针对此类情况的变通方法？

用例是在悬停时为一些线条上色，并在单击时为svg设置动画。

Answer 1

您可以在SVG上指定一个片段，比如../icons/fancy-symbol.svg#red，然后让文件中的CSS对此做出反应：

<style>
  #red:target ~ .some-element-here {
    fill: red;
  }
</style>

这不会让您动态地指定属性，但它对于交互状态很有用，特别是对于预处理器。

或者，如果SVG文件足够小，您可以使用预处理器更改数据URI中的属性，如使用sass-svg，或手动更改：

.li:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
  fill='#{$color}'%3E...");
}

(顺便说一句，使用ul { list-style-image: url(...) }可能比使用伪元素更容易。)