特定の幅でSVGの境界線を切り取る

Question

サイズを決定するための相対幅（コンテナの20％）を使用する2つのSVGグラフィックがあります。ウィンドウを大きくしたり小さくしたりしてサイズを変更すると、SVGの左端が特定の幅で切り取られます。

EDIT：ロバート・ロンソンの提案に基づいて、私はマークアップを境界線までトリミングしました。ここで

は実施例である：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を使用する全体の点がスケールされるので、やりたくないです）。これがなぜ起こっているのか？

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

私はoverflow: visible;へoverflow: hidden;を変更しようとしたSVGは、もはや切断されました：Chromeでコードを検査する場合

Answer 1

は、私は（ない私が）このスタイルのほかに気づいていません。私のスタイルシートに

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

を追加

は、問題を修正しますが、SVGは、最初の場所で溢れている理由私はまだ理解していません。

これは解決策よりも実際的な回避策であるため、私は誰かが真の根本原因を説明できるようにこの回答を受け入れないようにします。

Answer 2

あなたのパスは、ビューボックス外で起こっている、したがって、最も簡単な解決策は

ここ

viewBox="-322 591 150 44" 

すなわちビューボックスは大きめにすることです私は少し左にそれを拡張し、また右にしました（増加させることにより、その幅よりも幅が大きくなってxが小さくなった）、右端が時々カットされていることが分かりました。