Html Svg 图像不显示在 Firefox 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17708920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Svg image does not show in Firefox
提问by Alexandru Chirila
Inside a simple SVG element I have an image.
在一个简单的 SVG 元素中，我有一个图像。
- Chrome: Version 28. - works perfect
- Firefox: 22.0 - no image is drawn
- Opera: 12.16 - image is show 4 times larger than normal
- Chrome：版本 28。 - 完美运行
- Firefox：22.0 - 不绘制图像
- Opera：12.16 - 图像显示为比正常大 4 倍
Code:
代码：
<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>
采纳答案by Paul LeBeau
Your SVG is not being scaled to fit your 10x10 image rectangle because it has no viewBox. SVG renderers need to know the dimensions of the SVG content in order to know how to scale it. That is what the viewBox attribute is for.
您的 SVG 没有被缩放以适合您的 10x10 图像矩形，因为它没有 viewBox。SVG 渲染器需要知道 SVG 内容的尺寸才能知道如何对其进行缩放。这就是 viewBox 属性的用途。
Try adding the following to the root <svg>element in knight.svg.
尝试将以下内容添加到<svg>Knight.svg的根元素中。
viewBox="0 0 45 45"
Also, you need to define your namespaces for svg and xlink. Although perhaps you have just removed those for clarity(?).
此外，您需要为 svg 和 xlink 定义命名空间。虽然也许您只是为了清楚起见才删除了那些（？）。
回答by Robert Longson
Your knight is 45 x 45 pixels in size. The top left corner (10 x 10) pixels is blank.
您的骑士大小为 45 x 45 像素。左上角 (10 x 10) 像素为空白。
You are asking for the image to be displayed for that top left corner in the <image>markup so Firefox correctly shows nothing because there's nothing there.
您要求在<image>标记的左上角显示图像，因此 Firefox 正确显示任何内容，因为那里没有任何内容。
If you want to see the knight, make the <image>width and height 45 to match the underlying knight.svg dimensions.
如果您想看到骑士，请将<image>宽度和高度设为 45 以匹配底层的 Knight.svg 尺寸。
Neither Chrome nor Opera seem to display the image correctly
Chrome 和 Opera 似乎都无法正确显示图像
'image' 元素为引用的文件建立一个新的视口，如建立新视口中所述。新视口的边界由属性“x”、“y”、“宽度”和“高度”定义
