跨浏览器兼容的 SVG 大小调整

Question

我刚开始使用 SVG 精灵，但在观看了有关 SVG 精灵的树屋视频后，我开始尝试了。我使用他们在视频中使用的相同格式 link 以及从 sprite 中提取的 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 时，它们在 Edge（可能是 IE，尚未检查）中变得像素化，即使它们在 Chrome 中看起来不错。有关如何使浏览器兼容的帮助？我是否需要使用容器、svg 元素、视图元素、视图框或它们的某种组合？

Answer 1

这里是Demo ! You can download it from Here。

My workflow

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

var scaleValue = 1.2;

我通常使用"inline" SVG 和GreenSock 库来制作动画！

跨浏览器兼容的 SVG 大小调整

SVG Sizing that's Cross-Browser Compatible

html

css

svg

image

cross-browser