CODEWITHSUNDEEP
csssvg
user365647
user365647

Reputation:

Make SVG drawing take full width

I wonder why the path element does not take the full width of the SVG frame with viewport set to 100 units wide. Is it because the drawing encoded in the path tag contains extra space on the right?

  <div style="width: 200px; height: 200px; background-color: rgb(2, 189, 173); background-image: linear-gradient(135deg, rgb(2, 189, 173), rgb(3, 82, 149));">

  <svg style="width: 100%;" viewBox="0 0 100 100">
    <path d="M71.7 14.7H3.1L16.3 1.4 14.9 0 0 14.9v1.5l14.9 14.9 1.4-1.4L3.1 16.7h68.6z" style="
    fill: white;"></path>
  </svg>

  </div>

http://codepen.io/anon/pen/NRELRB

Upvotes: 1

Views: 318

Answers (1)

user365647
user365647

Reputation:

The problem was that I misinterpreted the viewBox's last 2 arguments.

0, 0, 100, 100 does not correspond to setting 100% width, 100% height.

The SVG viewport is like an iframe and has no idea of the contents inside of it so it's your job to place the frame over the drawing you have in that SVG document. So in my case it should be 0, 0, 71, 31.

Upvotes: 0

Related Questions