svg 内的 svg 被光栅化，导致放大时结果模糊答案

【问题标题】：svg inside svg is rasterized causing blury results when scaling upsvg 内的 svg 被光栅化，导致放大时结果模糊
【发布时间】：2012-09-15 14:47:37
【问题描述】：

我想在 <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 中，我有时会得到一个模糊的图像，因为它会在放大嵌套 SVG 之前对其进行光栅化。

注意：它有时在 Firefox 和 Chrome 中按预期工作（嵌套的 SVG 保持清晰），但并非总是如此（例如，如果我在 Chrome 中打开附加的 JSFiddle，它会变得模糊/损坏。如果我按 F5，它会很清晰/工作）

有什么方法可以确保嵌套的 SVG 在缩放之前永远不会被光栅化？

谢谢:)

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

【问题讨论】：

标签： svg scale blurry rasterize

【解决方案1】：

这是一个known bug in Chrome，由于图像被缓存了。您无法从代码中修复此问题，因为这是一个浏览器错误，但您可以尝试在服务器端禁用该图像的缓存。

【讨论】：