如何缩放svg <img/>元素以填充整个<svg>区域？

Question

This 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％宽度。