SVG图像未在Firefox中显示

本文介绍了SVG图像未在Firefox中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Inside a simple SVG element I have an image.

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>

推荐答案

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

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.

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

Try adding the following to the root <svg> element in knight.svg.

  viewBox="0 0 45 45"

此外，您需要为svg和xlink定义名称空间.尽管也许您只是为了清楚起见删除了这些内容??

Also, you need to define your namespaces for svg and xlink. Although perhaps you have just removed those for clarity(?).

这篇关于SVG图像未在Firefox中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！