CODEWITHSUNDEEP
svg
Stuart
Stuart

Reputation: 1602

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

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.

Here's how it currently looks:

enter image description here

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

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.

Thanks for your help!

Upvotes: 1

Views: 166

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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.

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

viewBox="11 9.5 247 247"

will cause it to fill your viewport.

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

Demo here

Upvotes: 3

Related Questions