ブラウザで調整可能なsvgを作成する方法

Question

svgでシェイプを作成しましたが、ブラウザのサイズを変更すると切り抜かれます。解決策を知っている人は答えてください。

<svg width="1315" height="65" id="intro-weg" style="background: red"> 
    <g transform="matrix(1.25,0,0,-1.25,0,611.25)"> 
     <g transform="scale(0.1,0.1)"> 
      <path d="m 10520,4376 c -383.8,320.87 -877.97,514 -1417.32,514 0,0 526.42,-552.76 -2211.03,-552.76 L 0,4337.24 0,0 l 10520,0 0,4376" class="colorize"></path> 
     </g> 
    </g> 
</svg> 

Answer 1

あなたはSVGが応答するためにこれらの手順に従うことができます：

1. は、あなたのSVG要素からheight属性をハードコードさwidthを削除します。

   <svg id="intro-weg" style="background: red"> 
   

2. それぞれ3番目と4番目の値として必要な幅と高さ（以前ごSVGに指定したのと同じ）を指定し、viewBox属性を追加します（more about viewBox）

   <svg id="intro-weg" viewBox="0 0 1315 65" style="background: red"> 
   

3. を幅指定し、 CSSであなたのSVG要素の高さ：

   svg#intro-weg{ 
       width: 100%; 
       height: auto; 
   } 
   

あなたのsvgはすぐに応答するはずです。

Answer 2

ブラウザに、このSVGが、幅1315ピクセル、高さ65ピクセルの画像として動作することを伝えました。代わりに、viewBox属性を使用して内部SVGイメージの正確なサイズを定義し、CSSを使用してページ内にSVGイメージを配置することにより、明示的なwidthおよびheight属性を削除することを検討してください。

そのXMLは、プログラム内で（手ではなく）作成されたように見えるので、まずはプログラムのどこかで「ビューボックス」オプションを探します。このSVG XMLを手作業で入力する場合は、MDN's discussion of the viewBox attributeを読むことを検討してください。