2012-03-05 5 views
11

これは非常に奇妙です。私は、ファイルサイズが小さく、鮮明なレンダリング、およびスケーラビリティ(オブジェクトがかなり動く)のためにSVGイメージを使用しています。 FF、ie9、Safari、iPadなどで完璧に動作しますが、クロムの特定のSVG画像は非常に貧弱です。クロムのSVGピクセル化

SVG in chrome

SVG in safari

任意のアイデアなぜこれが起きているのでしょうか? svgファイル自体は非常に小さいです。ここで

は、いくつかのサンプルSVG

http://c975805.r5.cf2.rackcdn.com/rs-grails-r4/passion/social.svg

http://c975805.r5.cf2.rackcdn.com/rs-grails-r4/passion/social.svg

+0

あなたはおそらくChromeでバグレポートを提出する必要があり、そしてあなたが質問にいくつかのサンプルコードを持っていた場合、答えるために容易になるだろう:) –

+0

私が追加しましたより良いライブサンプル。 – Fresheyeball

+0

私はバグレポートを提出しました:http://code.google.com/p/chromium/issues/detail?id=119471答えを待っています... –

答えて

9

あるので、とにかく、これは合法的なクロームのバグです。そして、修正があります、svgを大きくしてください.SVGファイルは内部的にこのバグをあまりにも小さなものとして報告します。
は(私はそのため[email protected]それを命名)を2回必要な寸法SVGをエクスポート
そしてCSSで、transform: scale(0.5)

結果でを追加します。

+0

親愛なるdownvoter ..なぜ落選ですか? – Fresheyeball

+3

一部の人々は真実を処理することはできません! hahah – XerxesNoble

+0

どのようなsence @ Fresheyeballでより大きい?ファイルサイズ?またはCSSの次元? –

3

は、多くの研究の後、私は最終的に作業の修正を見つけましたChromeはFirefoxと同じように見えます。

+1

StackOverflowに関する何十もの問題を精査し、どこでもこれについて読むことができました。これは、私が印刷しているPDFでSVGを正しくレンダリングするためにChromeを騙す唯一の回避策であることが判明しました。私の状況も非常に複雑で複雑で、 'zoom'と' scale'プロパティの複数の層がありました。 – Brian

2

私はこのバグをSVGバックグラウンドの要素でも実行しました。この問題を回避するには、すなわち、0.01で不透明度を減らすことだった。

.thing { 
    background: url('my-image.svg'); 
    opacity: 0.99; 
} 
関連する問題