我如何縮放SVG <image> 元素填充整個 <svg> 區域？

Question

這個jsFiddle 。

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="400px" 
    height="400px" 
    viewBox="0 0 1000 1000" 
    preserveAspectRatio="none" 
    style="border: 1px solid black;">

    <image x="0" y="0" 
            width="1000" 
            height="1000"
            xlink:href="http://www.bized.co.uk/sites/bized/modules/bized_cb_navigation/images/floorplan_info.gif">
    </image>
</svg>

1. 我的實際繪圖區域是400px x 400px。
2. 我在（0,0）到（1000,1000）上定義一個坐標系。
3. 我將圖像設置為x=0 y=0 width=1000 height=1000
4. 圖像應在x和y軸上從0一直填充到1000。

除了4.不會發生-您可以看到左右之間都有空白。 我想念什么？

Answer 1

組

<image … preserveAspectRatio="none"></image>

僅在SVG標簽中設置該值是不夠的

Answer 2

只需在圖片上設置width="100%" ，即可將圖片縮放為svg的100％寬度。