在伪元素中使用SVG图标，控制其大小和颜色？

Question

我希望实现类似于这样的效果：

Link >

其中>是一个SVG图标。

我正在使用icomoon.io的“chevron-right”图标，并通过内联图标精灵文件（只包含此图标）加载图标。

我内联引用其他图标，这样可以正常工作。

<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use></svg>

.icon {
  display: inline-block;
  stroke-width: 0;
  stroke: black;
  fill: currentColor;
  width: 1.1em;
  height: 1.1em;
}

我正在寻找一种方法来引用伪元素中的图标，以便我可以轻松地将其用于所有链接的样式。目前我找到的唯一方法是内联它，但无论我将其用作背景图像还是内容，都无法控制其大小或颜色。

.-with-trailing-chevron:after  {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='##4A89AA' d='M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z'%3E%3C/path%3E%3C/svg%3E");
  background-image-size: cover; // these don't seem to work
  display: inline-block;
  width: .8em; // these don't seem to work on the icon
  height: .8em; // these don't seem to work on the icon
}

此外，我更希望引用它而不是内嵌它。

这些是否可行？

图标精灵文件，我目前将其内联以避免ie的不兼容性：

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-chevron-right" viewBox="0 0 24 24">
<title>chevron-right</title>
<path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path>
</symbol>
</defs>
</svg>

- aaandre

---

你尝试在标记中使用石榴石SVG作为背景图像而不是真正的物理元素，有何原因？或者，你是否尝试过使用“content”属性而不是background-image来指定伪元素？如果它是内容属性的一部分而不是background-image，则可以更改元素的颜色和大小（未经测试）。 - CaliCo

尝试使用内容属性；没有增加更多的控制；我认为我的主要问题在于缩放，在两种情况下都是如此。而且，需要在CSS中将元素嵌入行内。我可能最终会在HTML中使用图标作为SVG参考，希望能够清理标记。 - aaandre

Answer 1

Data URL被视为惰性图像，不允许外部（对于数据URL！）引用。您需要在SVG代码中设置它们的属性内部。因此，如果您想更改大小和颜色，只需使用以下代码：

a::after {
    content: url('data:image/svg+xml,<svg width="1em" height="1em" fill="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
    vertical-align: -0.2em;
    padding-left: 0.1em;
}
a:hover::after {
    content: url('data:image/svg+xml,<svg width="1.2em" height="1.2em" fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
    vertical-align: -0.3em;
    padding-left: 0;
}

<a href="">Link</a>

正如您所看到的，定位仍然可以通过CSS进行修改。

- ccprog

---

非常感谢，这是一个我可以使用的解决方案。我被内容中的引号/双引号和一些定位问题所困扰，而垂直对齐属性解决了这些问题。 - aaandre