Question

我希望能达到这样的目的：

Link >

>是SVG图标。

我正在使用icomoon.io＆＃34; chevron-right＆＃34;图标和通过内联图标精灵文件加载图标（包括，只有这个图标）。

我引用内联的其他图标，并且工作正常。

<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
}

此外，更愿意引用它而不是内联。

这些可能吗？

图标精灵文件，我目前内联以避免不兼容：

<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>

Answer 1

数据网址被视为不允许外部（对数据网址！）引用的惰性图像。您需要在svg代码中设置内部属性。因此，如果您想要更改尺寸和颜色，只有这样才能起作用：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: