1

<svg>タグ内に外部SVG画像ファイルを埋め込みたいのですが。これを行うために、私は<image>次のようにSVGのタグを使用しています。

<svg width="1000" height="1000"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

    <image x="0" y="0" width="48" height="48"
     xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg"
     transform="scale(5.0)" />

</svg>

ご覧のとおり、transform属性を追加して、ネストされたSVGを5.0でスケーリングしようとしています。残念ながら、FirefoxとChromeの両方で、ネストされたSVGをスケールアップする前にラスタライズしているため、画像がぼやけることがあります。

注：FirefoxとChromeでは期待どおりに機能することがあります（ネストされたSVGは鮮明なままです）が、常に機能するとは限りません（たとえば、接続されているJSFiddleをChromeで開くと、ぼやけたり壊れたりします。F5キーを押すと、鮮明で機能します）

ネストされたSVGがスケーリングの前にラスタライズされないようにする方法はありますか？

ありがとう ：）

JSFiddle： http: //jsfiddle.net/a9NRY/17/

醜いラスタライズ 完全

4

1 に答える 1

2

これはChromeの既知のバグであり、画像がキャッシュされていることが原因です。これはブラウザのバグであるため、コードから修正することはできませんが、サーバー側でその画像のキャッシュを無効にすることはできます。

于 2012-09-16T01:30:10.503 に答える