1

我想在<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/

丑陋的光栅化 完美的

4

1 回答 1

2

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

于 2012-09-16T01:30:10.503 回答