親コンテナでsvgスケールを作成するにはどうすればよいですか？

サイズがネイティブではない場合、インラインsvg要素のコンテンツスケールが必要です。もちろん、別のファイルにして、そのようにスケーリングすることもできます。

index.html： <img src="foo.svg" style="width: 100%;" />

foo.svg： <svg width="123" height="456"></svg>

ただし、CSSを介してSVGにスタイルを追加したいので、外部スタイルをリンクすることはできません。インラインSVGスケールを作成するにはどうすればよいですか？

画像のスケーリングされたサイズとは無関係にSVG画像内の座標を指定するにはviewBox、SVG要素の属性を使用して画像の境界ボックスが画像の座標系にあるものを定義し、widthおよびheight属性を使用して何を定義するか幅または高さは、含まれているページを基準とします。

たとえば、次の場合：

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10px x 20pxの三角形としてレンダリングされます：

ここで、幅と高さのみを設定すると、SVG要素のサイズは変更されますが、三角形はスケーリングされません。

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

ビューボックスを設定すると、指定したボックス（画像の座標系）が指定した幅と高さ（ページの座標系）に収まるように拡大されるように画像が変換されます。たとえば、三角形を100px x 50pxに拡大するには：

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

HTMLビューポートの幅まで拡大する場合：

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

デフォルトでは、アスペクト比が保持されることに注意してください。したがって、要素の幅を100％、高さを50pxと指定すると、実際には50pxの高さまでしか拡大されません（非常に狭いウィンドウがない場合）。

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

実際に水平方向に引き伸ばしたい場合は、次のコマンドでアスペクト比の維持を無効にしpreserveAspectRatio=noneます。

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

（私の例では、HTML埋め込みに機能する構文を使用していますが、StackOverflowに画像として例を含めるには、代わりに別のSVG内に埋め込むため、有効なXML構文を使用する必要があります）

48時間ほどの調査の後、比例スケーリングを行うためにこれを行うことになりました。

注：このサンプルはReactで作成されています。それを使用していない場合は、キャメルケースの文字をハイフンに変更backgroundColorします（つまりbackground-color、スタイルをに変更し、スタイルをにObject戻しますString）。

<div
  style={{
    backgroundColor: 'lightpink',
    resize: 'horizontal',
    overflow: 'hidden',
    width: '1000px',
    height: 'auto',
  }}
>
  <svg
    width="100%"
    viewBox="113 128 972 600"
    preserveAspectRatio="xMidYMid meet"
  >
    <g> ... </g>
  </svg>
</div>

上記のサンプルコードで何が起こっているかを次に示します。

ビューボックス

MDN：https : //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

min-x、min-y、幅、高さ

例：viewbox = "0 0 1000 1000"

Viewboxは基本的にSVGに描画するサイズと場所を指示するため、重要な属性です。あなたはSVG 1000×1000ピクセルを作るためにCSSを使用しますが、あなたのビューボックスは、2000×2000だった場合、あなたは見ることが左上四半期あなたのSVGのを。

最初の2つの数値、min-xとmin-yは、SVGをビューボックス内でオフセットする必要があるかどうかを決定します。

SVGを上/下または左/右にシフトする必要がある

これを調べてください：viewbox = "50 50 450 450"

最初の2つの数値はSVGを左に50ピクセルから50ピクセル上にシフトし、次の2つの数値はビューボックスのサイズ：450x450ピクセルです。SVGが500x500であるが、余分なパディングがある場合、それらの数値を操作して「ビューボックス」内を移動できます。

この時点での目標は、これらの数値の1つを変更して何が起こるかを確認することです。

ビューボックスを完全に省略することもできますが、そのときの距離は、そのときのその他すべての設定によって異なります。私の経験では、ビューボックスがアスペクト比の定義に役立つため、アスペクト比の維持に関する問題が発生します。

アスペクト比を保持

MDN：https : //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

私の調査によると、さまざまなアスペクト比設定がありますが、デフォルト設定はと呼ばれていxMidYMid meetます。私ははっきりと自分を思い出させるためにそれを私の上に置きました。xMidYMid meet中点XとYに基づいて比例して拡大縮小します。これは、ビューボックスの中央に留まることを意味します。

幅

MDN：https : //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width

上記のサンプルコードを見てください。幅のみを設定し、高さは設定していないことに注意してください。私はそれを100％に設定して、それが入っているコンテナーを満たします。これが、おそらくこのスタックオーバーフローの質問への回答に最も貢献しているものです。

必要に応じて任意のピクセル値に変更できますが、最大サイズに拡大し、親コンテナを介してCSSで制御する場合と同じように、100％を使用することをお勧めします。「適切な」制御が得られるので、これをお勧めします。メディアクエリを使用でき、JavaScriptを使用せずにサイズを制御できます。

CSSによるスケーリング

上記のコード例をもう一度見てください。これらのプロパティがあることに注意してください。

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

これは追加ですが、適切なアスペクト比を維持しながらユーザーがSVGのサイズを変更できるようにする方法を示しています。SVGは独自のアスペクト比を維持するため、親コンテナで幅をサイズ変更可能にするだけで、必要に応じてサイズを変更できます。

高さはそのままにするか、自動に設定し、幅でサイズ変更を制御します。幅を選択したのは、レスポンシブデザインのために幅がより意味のあることが多いためです。

以下は、これらの設定が使用されている画像です。

この質問のすべての解決策を読んでもまだ混乱しているか、必要なものがよくわからない場合は、こちらのリンクをご覧ください。私はそれがとても役に立ったと感じました：

https://css-tricks.com/scale-svg/

それは巨大な記事ですが、CSSの有無にかかわらず、SVGを操作するためのほとんどすべての可能な方法を分類します。さりげなくコーヒーを飲んだり、お好みの液体を選んで読んだりすることをお勧めします。

次のように変換を行います。

JavaScriptを使用：

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

CSSを使用する場合：

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

SVGページをグループタグで囲み、ページ全体を操作するようにターゲット設定します。

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

注：スケール1.0は100％です

ふざけていて、このCSSには、コンテナが画像よりも大きくなるところまで、ChromeブラウザのSVGが含まれているようです。

div.inserted-svg-logo svg { max-width:100%; }

FF + IE 11でも動作しているようです。

SVGファイルを変更することは私にとって公平な解決策ではなかったので、代わりに相対CSSユニットを使用しました。

vh、vw、%非常に便利です。CSSを使用しheight: 2.4vh;て、SVG画像に動的サイズを設定しました。

別の簡単な方法は

transform: scale(1.5);

currentScale属性の調整はIEでは機能しますが（IE 11でテストしました）、Chromeでは機能しません。