如何使我的嵌入式 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 属性。您当前将其设置为 360 度的宽度和高度，而您的圆的直径仅为 247 度左右。

圆圈的左上角大致在 (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

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

How can I make my embedded svg image stetch to fill a container?

svg