可以添加 SVG ::before 元素并访问描边和填充吗？

【问题标题】：Possible to add SVG ::before element and have access to stroke and fill?可以添加 SVG ::before 元素并访问描边和填充吗？
【发布时间】：2016-03-23 16:53:18
【问题描述】：

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

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

并可以访问 svg 的对象（例如特定的线或矩形）和属性（例如笔划宽度、罢工和填充颜色）？

或者是否有针对此类情况的解决方法？

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

【问题讨论】：

在这种情况下，SVG 的属性和属性将无法从外部修改。
这不是 SVG 实现中的一个巨大缺陷吗？是否计划访问元素？
不，这是对您隐私的巨大保护。因此，将永远不允许访问元素。

标签： svg

【解决方案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(...) } 代替伪元素可能更容易。）

【讨论】：