Html css中的svg精灵-是变换缩放合法的缩放方式

Im使用SVG sprite作为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精灵的合法方法吗？有没有其他方法可以实现这一目标？提前感谢

为什么不使用宽度和高度进行缩放

您的缩放方式没有错，但我不确定它是否能与所有浏览器兼容

这里有一个例子

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

。图标{
背景尺寸：自动100%！重要；
显示：内联块；
}
.icon.small{
高度：1米；
宽度：1米；
}
.icon.large{
高度：2米；
宽度：2米；
}
.icon_1{
背景：url（'data:image/svg+xml；utf8'，）100%0无重复；
}
.图标2{
背景：url（'data:image/svg+xml；utf8'，）33.33%0无重复；
}

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

“变换”属性定义应用于元素及其子元素的变换定义列表

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

---

查看此链接>>了解更多示例

为什么不使用宽度和高度进行缩放

您的缩放方式没有错，但我不确定它是否能与所有浏览器兼容

这里有一个例子

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

。图标{
背景尺寸：自动100%！重要；
显示：内联块；
}
.icon.small{
高度：1米；
宽度：1米；
}
.icon.large{
高度：2米；
宽度：2米；
}
.icon_1{
背景：url（'data:image/svg+xml；utf8'，）100%0无重复；
}
.图标2{
背景：url（'data:image/svg+xml；utf8'，）33.33%0无重复；
}

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

“变换”属性定义应用于元素及其子元素的变换定义列表

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

---

查看此链接>>了解更多示例

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

如果您只需要一个特定的大小就可以让它看起来很好看，我建议您编辑SVG sprite代码（它的XML看起来完全像HTML，因此您理解它不会有问题），确保所有SVG元素都封装在一个组中，并将transform作为属性添加到此组中。这基本上就像在图形编辑器中打开精灵，缩放它并保存

---

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

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

如果您只需要一个特定的大小就可以让它看起来很好看，我建议您编辑SVG sprite代码（它的XML看起来完全像HTML，因此您理解它不会有问题），确保所有SVG元素都封装在一个组中，并将transform作为属性添加到此组中。这基本上就像在图形编辑器中打开精灵，缩放它并保存

---

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

如果图像具有viewBox=“none”，则设置宽度/高度不会缩放图像。因此，这似乎比OPs最初的想法更糟。因此，我的想法并不伟大，但比这更好？@RobertLongson你是对的，svg需要一个视图框才能进行缩放。@riogrande我可以建议各种替代方案，你没有提供判断我的比你的好还是坏的标准，所以你的问题只是一个购物清单问题。我很想知道一些备选方案，因为谷歌没有给我想要的结果。如果图像有viewBox=“none”，那么设置宽度/高度将无法缩放它。因此，这似乎比OPs最初的想法更糟。因此，我的想法并不伟大，但比这更好？@RobertLongson你是对的，svg需要一个视图框才能进行缩放。@riogrande我可以建议各种替代方案，你没有提供判断我的结果比你的好还是坏的标准，所以你的问题只是一个购物清单问题。我很想知道一些替代方案，因为谷歌没有给我我想要的结果！还有其他缩放css svg精灵的技术吗？一些网站建议使用背景大小的东西？Sprite是整个背景的一小部分。如果你搞乱了背景大小，你可能会得到不可预知的结果，比如没有把它放在想要的精灵上。但如果它对你有效，那就去做吧，我怎么知道你没有提供你案例的工作示例。太好了！还有其他缩放css svg精灵的技术吗？一些网站建议使用背景大小的东西？Sprite是整个背景的一小部分。如果你搞乱了背景大小，你可能会得到不可预知的结果，比如没有把它放在想要的精灵上。但如果它对你有效，那么就去做吧，我怎么知道你是否还没有提供案例的工作示例。如果我列出了3个进行缩放的想法，而其他人列出了3个其他想法，你会接受哪一个答案？如果这对你和你自己都重要，我真的只是想寻求帮助，这是不是一件错误的事情：）你接受哪一个对我来说没有区别。我只是想让你问一个更好的问题。也就是说，你以什么方式实现目标对你来说很重要