CODEWITHSUNDEEP
htmlcsssvg
SFBA26
SFBA26

Reputation: 890

SVG border cut off at certain widths

I have two SVG graphics that use a relative width for determining the size (20% of their container). When I change the the size by making the window larger or smaller the left border of the SVG gets cut off at certain widths.

EDIT: Upon Robert Longson's suggestion, I've trimmed down the markup to just the border.

Here is a working example: http://codepen.io/anon/pen/xVjjaG

Code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-321 591 148 44" style="enable-background:new -321 591 148 44;width:20%;" xml:space="preserve" class="apple_svg">
  <style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd; }
  </style>
  <g id="Layer_1">
    <g>
      <path d="M-177.7,634.5h-138.5c-2.6,0-4.7-2.1-4.7-4.7v-33.6c0-2.6,2.1-4.7,4.7-4.7h138.5c2.6,0,4.7,2.1,4.7,4.7l0,33.6
               C-173,632.4-175.1,634.5-177.7,634.5z M-316.3,592.5c-2.1,0-3.7,1.7-3.7,3.7v33.6c0,2,1.7,3.7,3.7,3.7h138.5
               c2.1,0,3.7-1.7,3.7-3.7l0-33.6c0-2.1-1.7-3.7-3.7-3.7H-316.3z"/>
    </g>
  </g>   
</svg>

This is what it looks like when it's cut off: cutoff

And this is how it is supposed to look (and does at certain widths): enter image description here

I have tried tweaking all kinds of values and cannot seem to fix it (other than making it a fixed width, which I would prefer not to do because the whole point of using an SVG is so that it will scale). Any ideas why this is happening?

Upvotes: 0

Views: 6043

Answers (2)

Robert Longson
Robert Longson

Reputation: 124229

Your path is going outside the viewBox, the simplest solution therefore is to make the viewBox slightly bigger i.e. 

viewBox="-322 591 150 44"

Here I've extended it slightly to the left and also to the right (by increasing its width by more than the amount I decreased the x) as I found that the right edge was cut too sometimes.

Upvotes: 1

SFBA26
SFBA26

Reputation: 890

When inspecting the code in Chrome I noticed the addition of this style (not by me):

svg:not(:root) {
  overflow: hidden;
}

I tried changing overflow: hidden; to overflow: visible; and the SVG was no longer cut off.

Adding

svg:not(:root) {
  overflow: visible;
}

to my style sheet fixes the issue, but I still don't understand why the SVG is overflowing in the first place.

As this is really more of a workaround than a solution, I will leave this answer un-accepted in the hopes that someone will be able to explain the true root cause.

Upvotes: 3

Related Questions