如何使我的嵌入式svg图像拉伸以填充容器？

Question

我有一个嵌入式svg，它只能伸展到容器大小的2/3左右。我想让它填满整个容器。

以下是目前的情况：

我在这里有一个plunker来显示嵌入式svg：http://plnkr.co/edit/5PbBmhV6aBiAtanXTVgM

简化的svg结构是这样的：

    <svg id="approach_shot" viewBox="0 0 360 360" preserveAspectRatio="xMinYMin meet" class="content">
        <rect fill="#FFFFFF" stroke="#000000" stroke-width="0.5" width="360" height="360"></rect>
        <g id="green">
          <defs>
            <circle id="ball" r="6" stroke="#000000" fill="#FFFFFF" stroke-width="0.5"></circle>
          </defs>
          <g>
              <path fill="#005C1F" stroke="#005C1F" stroke-width="0.75" stroke-miterlimit="10" d="M42.09 171.26c-10.48-25.3-9.77-52.43-0.17-75.92l-18.48-7.65c-11.56 28.22-12.42 60.83 0.17 91.23 0.08 0.2 0.17 0.4 0.25 0.6l18.48-7.65C42.26 171.65 42.17 171.46 42.09 171.26z"/>
              more paths...
          </g>
          <g id="shots">
            <use xlink:href="#ball" transform="translate(150,150) scale(1.0)" />
          </g>
        </g>
    </svg>

我已经对这几个小时进行了黑客攻击，而我所做的一切都没有影响到绿色图像。外部矩形填充容器就好了。

感谢您的帮助！

Answer 1

最简单的方法是修复viewBox属性。当你的圆直径只有247时，你现在将它设置为360的宽度和高度。

圆圈的左上角大致为（11,9.5），因此将viewBox更改为：

viewBox="11 9.5 247 247"

会使其填满您的视口。

我如何确定圆的尺寸？我使用了一些javascript并在id =“green”的元素上调用了getBBox()函数。

var b = document.getElementById("green").getBBox();
alert(b.x+" "+b.y+" "+b.width+" "+b.height);

Demo here