在Firefox中不显示Svg图像

Question

在一个简单的SVG元素里面我有一个图像.

• Chrome:版本28. - 完美无缺
• Firefox:22.0 - 没有绘制图像
• 歌剧: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属性的用途.

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

  viewBox="0 0 45 45"

此外,您需要为svg和xlink定义名称空间.虽然你可能为了清晰起见而删除了那些(？).