在伪元素中使用SVG图标，并控制大小和颜色? [英] Using an SVG icon in a pseudo element, with control over size and color?

问题描述

我希望实现以下目标:

Link >

> 是SVG图标.

我正在使用icomoon.io的人字形右"图标，并通过将图标精灵文件(包括在内，仅包含此图标)内联来加载图标.

I am using icomoon.io's "chevron-right" icon and loading icons by inlining the icon sprite file (included, with only this icon).

我引用了其他图标，并且效果很好.

I reference other icons inline and that works OK.

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

我正在寻找一种在伪元素中引用该图标的方法，以便可以轻松地为其设置所有链接的样式.

I am looking for a way to reference the icon in a pseudo element so I can easily style all links with it.

到目前为止，我发现的唯一方法是内联它，但是无论是将其用作背景图像还是用作内容，我似乎都无法控制其大小或颜色.

So far the only way I've found is to inline it, but I can't seem to control the size or color -- whether I use it as a background image or as content.

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

此外，宁愿引用它而不是内联.

Also, would much prefer to reference it instead of inlining.

有可能吗?

图标Sprite文件，我目前内联该文件以避免不兼容:

Icons sprite file, which I currently inline to avoid ie incompatibilities:

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

推荐答案

数据URL被视为惰性图像，不允许使用外部(数据URL！)引用.您需要在svg代码的内部中设置其属性.因此，如果您想更改大小和颜色，则只有这样才能起作用:

Data urls are treated as inert images that do not allow external (to the data url!) references. You need to set their properties inside the svg code. So if you want to change size and color, only this will work:

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进行修改.

As you can see, positioning can still be modified by CSS.

这篇关于在伪元素中使用SVG图标，并控制大小和颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！