svg 图像在 Firefox 中不显示

Question

在一个简单的 SVG 元素中，我有一个图像。

• Chrome：版本 28。- 完美运行
• Firefox：22.0 - 未绘制图像
• Opera：12.16 - 图片显示为正常的 4 倍

代码：

Answer 1

您的骑士大小为 45 x 45 像素。左上角 (10 x 10) 像素为空白。

您要求在 <image> 标记的左上角显示图像，因此 Firefox 正确地什么都不显示，因为那里什么都没有。

如果您想查看骑士，请将 <image> 的宽度和高度设置为 45 以匹配底层的 knight.svg 尺寸。

Chrome 和 Opera 似乎都无法正确显示图像

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’

Answer 2

您的 SVG 没有被缩放以适应 10x10 图像矩形，因为它没有 viewBox。 SVG 渲染器需要知道 SVG 内容的尺寸才能知道如何缩放它。这就是 viewBox 属性的用途。

尝试将以下内容添加到 knight.svg 中的根 <svg> 元素中。

  viewBox="0 0 45 45"

另外，您需要为 svg 和 xlink 定义命名空间。尽管您可能只是为了清楚起见而删除了那些（？）。