Question

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

Chrome：版本28. - 完美无缺
Firefox：22.0 - 没有绘制图像
Opera：12.16 - 图像显示比正常大4倍

代码：

    <svg width="500px" height="500px" viewBox="0 0 70 70">
         <image x="0" y="0" width="10" height="10" 
               id="knight" xlink:href="/images/knight.svg" />
    </svg>

Answer 1

您的SVG未缩放以适合您的10x10图像矩形，因为它没有viewBox。 SVG渲染器需要知道SVG内容的维度，以便了解如何扩展它。这就是viewBox属性的用途。

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

  viewBox="0 0 45 45"

此外，您需要为svg和xlink定义名称空间。虽然你可能为了清晰起见而删除了那些（？）。

Answer 2

你的骑士尺寸为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’

在Firefox中不显示Svg图像

2 个答案: