SVG边框在某些宽度处切断

Question

我有两个SVG图形，它们使用相对宽度来确定大小（容器的20％）。当我通过使窗口变大或变小来改变大小时，SVG的左边界会在某个宽度处被切断。

编辑：根据罗伯特·朗森的建议，我已将标记减少到边界。

以下是一个工作示例：http://codepen.io/anon/pen/xVjjaG

代码：

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

这是它被切断时的样子：

这就是它应该看起来的样子（并且在某些宽度下）：

我试过调整各种值并且似乎无法修复它（除了使它成为固定宽度之外，我不想这样做，因为使用SVG的全部意义在于它会扩展）。任何想法为什么会发生这种情况？

Answer 1

在检查Chrome中的代码时，我注意到添加了这种风格（不是我）：

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

我尝试将overflow: hidden;更改为overflow: visible;，SVG不再被切断。

添加

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

到我的样式表修复了这个问题，但我仍然不明白为什么SVG首先溢出。

由于这实际上更像是一种解决方法，而不是一种解决方案，我将不接受这个答案，希望有人能够解释真正的根本原因。

Answer 2

您的路径是在viewBox之外，因此最简单的解决方案是使viewBox略大一些，即

viewBox="-322 591 150 44"

在这里，我略微向左延伸，也向右延伸（通过增加宽度超过我减少x的量），因为我发现有时会切割右边缘。