SVG精灵 - 是改造规模使用SVG精灵作为这样的CSS背景图像缩放

Im的合法的方式：SVG精灵 - 是改造规模使用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)，使它小两倍。

.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 sprite的合法方式吗？还有其他方法可以实现吗？在此先感谢

来源

2016-04-11 riogrande

[列出问题不是一个好主意]（https://blog.stackoverflow.com/2010/11/qa-is-hard-lets-go-shopping/）如果我列出了3个想法做缩放和其他人列出了3个其他想法，你会接受哪个答案？ –

如果你对你很重要，我真的只是想得到帮助，就像是一个错误的东西:) – riogrande

它对我来说没有什么区别，你接受。我只是想让你提出一个更好的问题。即为什么你对你的解决方案有何影响？您将使用什么标准来确定哪种解决方案最好？什么是“合法”？鉴于您的解决方案适合您，对此不是“合法”的东西？ –

为什么只是不使用宽度和高度来缩小？

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

这里是一个例子。

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

编辑如果你不指定视框上面的例子将无法正常工作。由于@RobertLongson

变换属性定义适用于一个元素和元素的子

现在来看，变换为比例变换定义列表（2）将工作的伟大，直到你没有一个孩子到那个有你的svg的div元素，如果你有一个孩子，那么它也会被缩放。但是，如果您使用宽度和高度，则只会缩放父级。

检查此链接>>更多的例子https://css-tricks.com/scale-svg/

来源

2016-04-11 13:13:25 Nicholas

如果图像有viewBox =“none”，那么设置宽度/高度将不会缩放它。这似乎比OP最初的想法更糟糕。 –

所以我的想法不是很好，但比这更好？ – riogrande

@RobertLongson你是对的，svg需要一个viewBox才能缩放。 – Nicholas

这是合法的。转换是本地SVG功能，应该始终适用于SVG元素。

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

如果您对SVG有更多的疑问，

来源

2016-04-11 14:48:26 Senthe

太棒了！是否还有更多缩放CSS svg sprites的技巧？有些网站建议使用背景大小的东西？ – riogrande

雪碧是整个背景的一小部分。如果你陷入背景大小的困境中，你可能会得到不可预知的结果，比如没有将它定位在所需的精灵上。但是，如果它适合你，那么就做吧，我怎么知道你是否没有提供你的案例的实例。 – Senthe

SVG精灵 - 是改造规模使用SVG精灵作为这样的CSS背景图像缩放

回答

相关问题