私はこのような背景のプロパティでSVGを使用する場合

Question

スケーリングとCSS3の背景画像としてSVGを使用する：

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

私は、結果としてぼやけた画像を取得します。同時にこのスタイルのタグのテキストは明らかです。また、CTRL ++（ブラウザズーム）を使用してページを拡大する場合は、プロパティをすべて変換することは明らかです。

私は上のCSSのbackgroundプロパティを交換する場合：

<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object> 

画像は、いかなる場合でも任意のスケールで明らかです。

問題はどこですか？

サンプルjsfiddle

にアップデート： 私はこの問題について、いくつかのより多くの情報を見つけました：

1. StackOverflow question
2. Bug ticket for Chrome（私は/サファリ/クローム/ IE9の下で私のテストを試してみました10と同じ動作です。

Answer 1

Chrome/Safari IE9/10では、スケールプロパティの代わりにCSSズームプロパティを使用することにしました。

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

Firefoxの場合、Firefoxはズームプロパティをサポートしていないため、CSSスケールプロパティを使用しています。同時に、FirefoxはSVGの背景をよく調整します。 See result。

IE9の場合、一時的にCSSの幅プロパティを変更し、小さな遅延が戻ってきた後にjavascriptを書いています。このようにして、強制的にCSSの背景を再描画します。

Answer 2

私はこの間にこの「演奏」をしていて、これもフォントに気付いた。それは今のところ修正されているようですが（少なくともフォントの場合）。

私が内部の動作を理解する限り、スケーリングされた要素の内容はテクスチャにマッピングされ、テクスチャはスケーリングされます。

回避策として、3d平行移動を使用して、z軸上の要素を移動してサイズの変更を実現してください。しかし、これは最終的な成果を十分にコントロールすることはできません。

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