html – 使用SVG作为CSS3 background-image与缩放

概述当我在背景属性中使用SVG时,如下所示： .svg-button { -webkit-transform: scale(3.0) // root of the problem! background: url(Button.svg) no-repeat; width: 32px; height: 32px;} 结果我得到模糊的图像.同时这个风格的标签文字很清楚.另 当我在背景属性中使用SVG时,如下所示：

.svg-button {    -webkit-transform: scale(3.0) // root of the problem!    background: url(button.svg) no-repeat;    wIDth: 32px;    height: 32px;}

结果我得到模糊的图像.同时这个风格的标签文字很清楚.另外,如果我通过使用CTRL(浏览器缩放)缩放页面,而不是转换属性一切都很清楚.

如果我替换CSS背景属性：

<object type="image/svg+xml" data="button.svg" wIDth="32" height="32"></object>

在任何情况下,图像都以任何尺度清晰.

哪里有问题？

样品在jsfiddle

更新：
我找到了关于这个问题的更多信息：

> StackOverflow question
> Bug ticket for Chrome(我试过我的测试在Safari / Chrome / IE9 / 10和行为是一样的.

解决方法 我一直在玩“玩”,并注意到这是字体.虽然现在似乎已经修复(至少对于字体).

据了解内部的工作原理,缩放元素的内容被映射到一个纹理,而后者又被缩放.

作为解决方法,请尝试使用3d翻译,并在z轴上移动元素以实现大小更改.尽管如此,这不会对最终结果产生很大的控制.

.svg-button {    -webkit-transform: perspective(800px) translateZ(-300px);    background: url(button.svg) no-repeat;    wIDth: 32px;    height: 32px;}

总结

以上是内存溢出为你收集整理的html – 使用SVG作为CSS3 background-image与缩放全部内容，希望文章能够帮你解决html – 使用SVG作为CSS3 background-image与缩放所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。