跨瀏覽器兼容的SVG大小調整

我是使用SVG精靈的新手，但在觀看SVG精靈上的樹屋視頻之後，我正在嘗試使用它。我使用他們的視頻與SVG的背景圖像的鏈接也做了同樣的格式從精靈拉，即：跨瀏覽器兼容的SVG大小調整

<a href="whatever" class="helpmepls"></a>

凡樣式：

.helpmepls { 
    background: url("sprite.svg") no-repeat; 
    height: 32px; 
    width: 32px; 
    background-position: -32px -128px; 
    -webkit-transform: scale(2.0); 
    -ms-transform: scale(2.0); 
    -o-transform: scale(2.0); 
    transform: scale(2.0); 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

然而，每當縮放比1.0更大的圖像時，即使它們在Chrome中看起來不錯，它們也會在邊緣（也可能是IE，未檢查）中像素化。幫助如何使瀏覽器兼容？我是否需要使用容器，svg元素，視圖元素，視圖框或這些的組合？

來源

2016-09-20 Kevin Banas

@sohaib - 感謝編輯問題的語法，以便將字母SVG大寫。關於問題的實際內容，您是否有建議的解決方案？ –

我的答案[這裏]（http://stackoverflow.com/questions/39601958/svg-sizing-thats-cross-browser-compatible/39619698#39619698）請告訴我，如果一切順利！ –

這是Demo！您可以從Here下載。

My workflow

你可以通過JS從1號線改變scaleValue值控制縮放。

var scaleValue = 1.2;

我通常使用「inline」SVG和GreenSock庫來製作動畫！

來源

2016-09-21 14:40:43

好吧！請參閱此：https://jsfiddle.net/uw1wL9tf/ –

我使用'transform：scale（1.3）;'縮放！ –

是的變換：scale（1.3）;我目前使用的是什麼，它在Edge中看起來很模糊。我將它用作標記中的背景圖片。我認爲這篇文章有我正在尋找的答案，但我不理解如何實現它：https://css-tricks.com/scale-svg/ 但是，你的小提琴看起來很棒在Edge for我！所以我會研究一下。謝謝！ –

跨瀏覽器兼容的SVG大小調整

回答

相關問題