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

结果我得到模糊的图像.同时这个风格的标签文字很清楚.另外,如果我通过使用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和行为是一样的.

.svg-button {
    -webkit-transform: perspective(800pX) translateZ(-300pX);
    BACkground: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}