在Firefox中，SVG图像内部的SVG无法缩放

Question

我正在使用HTML文档中的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）中无法缩放以适应页面。它看起来像这样：

而在Firefox中它看起来像这样（好像根本没有缩放）：

如果我使用PNG版本替换SVG，则可以正常工作。这使我认为这是一个错误。

我应该提交错误报告吗？

- Fabien Snauwaert

Answer 1

不需要。因为在我看来，Firefox在这里的行为是正确的。

你链接的SVG文件（“Blank_vowel_trapezoid.svg”）没有viewBox属性，因此它不应该/不会按比例缩放以适应你的<img>边界。

如果有什么问题，你应该向Chrome和IE提出错误报告。

如果你想让SVG按比例缩放，请在其根<svg>标签中添加一个viewBox：

viewBox="0 0 1000 700"

并且删除width和height属性。

- Paul LeBeau