SVG描画を全幅にする

Question

パス要素が100単位幅に設定されたビューポートでSVGフレームの全幅を占めないのはなぜかと思います。 パスタグにエンコードされた図面に余分なスペースが含まれているためですか？

<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

Answer 1

問題は、私はビューボックスの最後の2つの引数を誤解していることでした。

0,0,100,100は100％幅、100％高さには対応していません。

SVGビューポートはiframeに似ており、内部に内容がないので、そのSVGドキュメントにある図面上にフレームを配置するのはあなたの仕事です。 私の場合、0、0、71、31でなければなりません。