svg内部的svg被栅格化，在放大时会导致blury结果

Question

我想在<svg>标记中嵌入外部SVG图像文件。为此，我使用SVG的<image>标记如下：

<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中，我有时会得到一个blury图像，因为它在扩展它之前光栅化了嵌套的SVG。

注意：它有时会在Firefox和Chrome中按预期工作（嵌套的SVG保持清晰），但并非总是如此（例如，如果我在Chrome中打开附加的JSFiddle，它会导致blury /破坏。如果我按下F5，它的清脆/工作）

有没有办法确保嵌套SVG在缩放之前永远不会被栅格化？

谢谢：）

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

Answer 1

这是一个known bug in Chrome，由图像被缓存的事实引起。您无法从代码中解决此问题，因为它是一个浏览器错误，但您可以尝试在服务器端禁用该映像的缓存。