如何使我的嵌入式svg图像拉伸以填充容器? [英] How can I make my embedded svg image stetch to fill a container?

问题描述

我有一个嵌入式svg，它只能扩展到其容器大小的2/3.我想把它装满整个容器.

I have an embedded svg that is will only stretch to about 2/3 of it's container size. I would like to get it to fill the entire container.

这是目前的样子:

我在这里有一个显示嵌入式svg的插件: http://plnkr.co/edit/5PbBmhV6aBiAtanXTVgM

I have a plunker here showing the embedded svg: http://plnkr.co/edit/5PbBmhV6aBiAtanXTVgM

简化的svg结构如下:

The simplified svg structure is like this:

    <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>

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

I've been hacking on this for a few hours, and nothing I do impacts that green image. The outer rectangle fills the container just fine.

感谢您的帮助！

推荐答案

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

The simplest way is to fix your viewBox attribute. You currently have it set to a width and height of 360, when your circle is only about 247 in diameter.

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

The top-left of the circle is at roughly (11, 9.5), so changing your viewBox to:

viewBox="11 9.5 247 247"

将使它充满您的视口.

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

How did I determine the dimensions of the circle? I used a little bit of javascript and called the getBBox() function on the element with id="green".

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

在此处演示

这篇关于如何使我的嵌入式svg图像拉伸以填充容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！