css - 使用 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>嵌入方法或类似方法来实现这一点？该解决方案还需要允许通过 CSS 为 SVG 着色。

score 1 · Accepted Answer

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

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

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

1 回答 1