使用SVG作爲CSS3的背景圖像縮放與

當我在後臺財產使用SVG這樣的：使用SVG作爲CSS3的背景圖像縮放與

.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 /鉻/ IE9我的測試/ 10和行爲是一樣的。

來源

2012-08-08 Victor

作爲CSS背景的SVG背景可悲地只有Opera和Webkit瀏覽器支持。你有沒有嘗試'背景大小：300％;'而不是轉換背景？ – feeela 2012-08-08 15:13:07

這只是示例。在實際情況下，我對層次結構的根進行轉換。 – Victor 2012-08-08 16:12:13

如果你發佈了一個jsfiddle文件，這將有助於人們確切地看到什麼是/什麼不工作，並「擺弄」它。 – 2012-08-08 23:31:31

-1

對於Chrome/Safari IE9/10我決定使用CSS縮放屬性來代替縮放屬性。

.svg-button { 
    zoom: 300%; 
    background: url(Button.svg) no-repeat; 
    width: 32px; 
    height: 32px; 
}

對於Firefox，我仍然使用CSS縮放屬性，因爲Firefox不支持縮放屬性。與此同時，Firefox可以很好地擴展SVG背景。 See result。

對於IE9我寫了JavaScript臨時修改CSS寬度屬性，並在小延遲後返回它。這樣我強制重繪CSS背景。

來源

2012-08-12 14:57:31 Victor

我一直在「玩」這一點，並注意到這也是字體。雖然它現在似乎是固定的（至少對於字體）。

據我瞭解內部工作原理，縮放元素的內容被映射到一個紋理，而該紋理又被縮放。

作爲解決方法，嘗試使用3d平移並在z軸上移動元素以實現尺寸更改。儘管如此，這對最終結果不會產生太多的控制。

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

來源

2012-08-09 09:10:39

謝謝。有趣的workarround，但我認爲它不適合真正的應用程序。我想了解我的問題的性質。 – Victor 2012-08-10 10:35:31

使用SVG作爲CSS3的背景圖像縮放與

回答

相關問題