html - SVG 边框以特定宽度截断

Question

我有两个 SVG 图形，它们使用相对宽度来确定大小(它们容器的 20%)。当我通过放大或缩小窗口来更改大小时，SVG 的左边框会以特定宽度被截断。

编辑:根据 Robert Longson 的建议，我已将标记缩减为仅边框。

这是一个工作示例: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 首先会溢出。

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