【问题标题】：Scaling on SVG icons through CSS within a :before selector在 :before 选择器中通过 CSS 缩放 SVG 图标
【发布时间】：2015-01-17 03:19:00
【问题描述】：

如何将 SVG 图标缩放为 CSS :before 选择器的一部分？

例子：

a[href$=".xml"]:before {
    content: url(http://public.xxx.com/html9.svg);
    width: 20px;
    height: 20px;
}

<a href="foo.xml">foo.xml</a>

【问题讨论】：

内容怎么样：'public.zioyx.com/html9.svg" width="20" height="20" />'
我清楚地询问了使用 CSS 而不是弄乱我的干净标记。
那是css。但不是加载一个网址，而是加载一个图像:(
请仔细阅读我的问题。我想在这里使用 CSS 有一个很好的理由：不要弄乱现有的标记——尤其是当标记不受我控制时。这么难懂？
javascript 不是一个选项？因为正如您所提到的：您不能在 CSS 中包含标记。内容不在 DOM 中，因此您无法通过 CSS 更改它。

标签： css svg

【解决方案1】：

像这样：

Fiddle with your scaled image

以及对 CSS 的相关更改：

a[href$=".xml"]:before {
    content: '';
    background-image: url(http://public.xxx.com/html9.svg);
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
}

【讨论】：