使用 CSS 从 spritesheet 插入和着色 SVG

Question

我正在使用svg-sprite 生成要通过<use> 方法嵌入的SVG spritesheet：

<svg class="icon">
  <use xlink:href="/assets/icons.svg#phone"/>
</svg>

这非常适合通过 HTML 标记嵌入和设置图标样式。

但是，我还需要完全通过 CSS 嵌入图标的选项。例如，通过 CMS 所见即所得编辑器添加内容列表不应要求内容编辑器添加额外的 SVG 元素。

例如：

<ul class="icon-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

.icon-list li::before { /* icon here */ }

有没有办法使用<use> embed 方法或类似方法来实现这一点？该解决方案还需要允许通过 CSS 为 SVG 着色。

Answer 1

如果我正确理解您的问题，基本答案是否定的。

您可以在 CSS 中包含 SVG 图标，就像您可以添加位图图标一样。例如background-image。但是由于浏览器隐私限制，它必须是自包含的。它不能用<use> 引用外部SVG 元素。或者实际上是任何外部对象 - 例如其他图像、字体等。

它也不能使用外部 CSS 设置样式。因此，例如，如果您需要同一图标的不同颜色变体，则需要为每种颜色创建单独的 SVG。