12

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

  • Chrome：第 28 版。-完美运行
  • Firefox：22.0 - 不绘制图像
  • Opera：12.16 - 图像显示比正常大 4 倍

代码：

    <svg width="500px" height="500px" viewBox="0 0 70 70">
         <图像 x="0" y="0" 宽度="10" 高度="10"
               id="knight" xlink:href="/images/knight.svg" />
    </svg>
4

2 回答 2

8

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

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

  viewBox="0 0 45 45"

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

于 2013-07-18T08:08:40.903 回答
2
于 2013-07-18T07:22:26.567 回答