css中的svg sprite -是变换缩放的合法方式

Question

我使用SVG雪碧图作为CSS背景图片，如下所示：

.icon-arrow-down-dims {
  background: url("../sprite/css-svg-sprite.svg") no-repeat;
  background-position: 16.666666666666668% 0;
  width: 32px;
  height: 32px;
  display: inline-block;
}

我唯一可以扩展它并按预期工作的方法是使用transform: scale(2)将其放大2倍，或使用transform: scale(.5)将其缩小2倍。

.icon-arrow-down-dims {
  @extend %svg-common;
  background-position: 16.666666666666668% 0;
  width: 32px;
  height: 32px;
  display: inline-block;
  transform: scale(2);
}

这真的很好用，因为它不像png精灵那样像素化。我的问题是:这是一种合法的扩展svg css精灵的方式吗？有没有其他方法可以做到这一点？提前感谢

Answer 1

为什么不使用宽度和高度来缩放呢？

你的伸缩方式没有错，但我不确定它是否会兼容所有的浏览器。

下面是一个例子。

.icon {
    background-size: auto 100% !important;
    display:inline-block;
}
.icon.small {
    height: 1em;
    width: 1em;
}
.icon.large {
    height: 2em;
    width: 2em;
}
.icon_1 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>') 100% 0 no-repeat;
}
.icon_2 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>') 33.33% 0 no-repeat;
}

编辑如果不指定viewBox，上面的示例将不起作用。谢谢@RobertLongson

transform属性定义了应用于元素及其子元素的转换定义列表

现在看，transform = scale(2)将非常有效，直到您没有包含svg的div元素的子元素，如果您确实有一个子元素，那么它也将被缩放。但是，如果您使用的是宽度和高度，则只会缩放父对象。

有关更多示例https://css-tricks.com/scale-svg/，请查看此链接>>

Answer 2

这是合法的。转换是原生SVG功能，应该始终与SVG元素配合使用。

如果你只需要一个特定的大小就能让它看起来很漂亮，我建议你编辑SVG sprite代码(它是XML，看起来和HTML完全一样，所以你理解它没有问题)，确保所有SVG元素都封装在一个组中，并将transform作为属性添加到这个组中。这基本上就像在图形编辑器中打开精灵，缩放它，然后保存。

如果您有更多关于SVG的问题，请提出来。