可以在元素之前添加SVG ::并且可以访问笔触和填充吗？

Question

是否可以像这样在CSS中添加before元素：

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

并且可以访问svg的对象（例如特定的行或矩形）和属性（例如笔触宽度，打击和填充颜色）？

或者是针对这种情况的解决方法吗？

用例是在悬停时为某些线条着色，并在点击时为svg设置动画。

Answer 1

你可以在SVG URL上指定一个片段，比如../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(...) }代替伪元素可能更容易。）