Javascript 缩放svg图像以适应宽度-viewBox+；保持纵横比don'；好像不行？

我不明白。 我有一个内嵌svg，作为sprite的一部分

<symbol id="mysvgimage" viewBox="0 0 1083 703" preserveAspectRatio="xMidYMid meet">
 //...some more svg stuff in here
</symbol>

//…这里还有一些svg的东西

我在这里使用它：

        <div class="col-xs-12 col-sm-10 col-sm-offset-1">
          <svg style="width:100%;height:100%;"><use xlink:href="#mysvgimage" /></svg>
        </div>

然而，它仍然很小，周围有很多空白。我做错了什么？我认为在svg+中使用preserve aspect ratio提供一个viewbox就可以了。但我似乎还没有完全理解

我的目标是将图像拉伸到父div的大小，所以我想做

width:100%

，然后做适合宽度的高度（所以我想我可以做

height:auto

）