SVG调整了跨浏览器的兼容性

Question

我是使用SVG精灵的新手，但在看了SVG sprites的树屋视频之后我就试着去了。我使用他们在视频中使用的相同格式来获取从精灵中提取的SVG的背景图像的链接，即：

<a href="whatever" class="helpmepls"></a>

样式在哪里：

.helpmepls {
    background: url("sprite.svg") no-repeat;
    height: 32px;
    width: 32px;
    background-position: -32px -128px;
    -webkit-transform: scale(2.0);
    -ms-transform: scale(2.0);
    -o-transform: scale(2.0);
    transform: scale(2.0);
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

然而，每当缩放大于1.0的图像时，即使它们在Chrome中看起来很好，它们也会在Edge中变得像素化（并且可能是IE，还没有检查过）。有关如何使浏览器兼容的帮助？我是否需要使用容器，svg元素，视图元素，视图框或其中某些组合？

Answer 1

这是！您可以从Demo下载。

  

Here

您可以通过更改JS中第1行的var scaleValue = 1.2; 值来控制缩放。

{{1}}

我通常使用＆＃34; inline＆＃34; SVG和GreenSock库制作动画！