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

斯图尔特

我有一个嵌入式svg,它只能扩展到其容器大小的约2/3。我想让它充满整个容器。

这是目前的样子:

在此处输入图片说明

我在这里显示嵌入式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>

我已经研究了几个小时,但我所做的任何事情都不会影响该绿色图像。外部矩形可以很好地填充容器。

谢谢你的帮助!

保罗·勒博

最简单的方法是修复viewBox属性。当圆的直径仅为247时,当前将其宽度和高度设置为360。

圆的左上角大约为(11,9.5),因此将viewBox更改为:

viewBox="11 9.5 247 247"

会使它充满您的视口。

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

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

演示在这里

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章