SVG中的SVG图像在Firefox中不能缩放

Question

我在HTML文档中使用了SVG，并在所述SVG中使用了外部SVG文件。像这样：

<svg class="ipachart" width="500" height="350" viewBox="0 0 500 350" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <!-- In Firefox 38.0.5, the svg does not scale to fit the SVG. While it's fine in Chrome. --> 
    <image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/gtindax1177ewmx/Blank_vowel_trapezoid.svg?dl=1" /> 

    <!-- Using a PNG, it scales just fine in Firefox --> 
    <!-- <image x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/w0i764blf4tbc4z/Blank_vowel_trapezoid.png?dl=1" /> --> 

</svg> 

JSfiddle

这个工作在Chrome和Safari的罚款。 （我不在乎IE。）

问题是，SVG图像不能适应Firefox（版本38.0.5）。而不是寻找这样的：

它看起来像这样（就好像是不结垢全部）：

如果我在地方的使用PNG版本SVG，它像预期的那样工作。这让我觉得这是一个错误。

我应该提交一份错误报告吗？

Answer 1

不是。因为它在我看来像Firefox在这里有正确的行为。

您要链接到的SVG（“Blank_vowel_trapezoid.svg”）没有viewBox属性，所以它不应该/不会被缩放以适合您的<img>范围。

如果有什么问题，应该针对Chrome和IE提出错误。

如果您想要SVG缩放。添加viewBox其根<svg>标签：

viewBox="0 0 1000 700" 

并删除width和height属性。