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属性。