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