web-dev-qa-db-ja.com

どのように私はその親コン​​テナでSVGスケールを作ることができますか？

サイズがネイティブでない場合は、インラインのsvg要素のコンテンツのサイズを調整したいです。もちろん、私はそれを別のファイルとして持っていてそれをそのように拡大縮小することができました。

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

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

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

htmlcsshtml5svgscaling
190
bjb568

SVG画像内の座標を画像の拡大縮小サイズとは無関係に指定するには、SVG要素のviewBox属性を使用して画像のバウンディングボックスを画像の座標系に定義し、widthおよびheight属性を使用します幅や高さを含むページに対する幅または高さを定義します。

たとえば、次のものがあるとします。

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

10ピクセルx 20ピクセルの三角形としてレンダリングされます。

10x20 triangle

さて、幅と高さだけを設定すると、SVG要素のサイズは変わりますが、三角形の大きさは変わりません。

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

10x20 triangle

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

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

100x50 triangle

HTMLビューポートの幅まで拡大したい場合は、

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

300x150 triangle

デフォルトでは、縦横比は維持されます。つまり、要素の幅を100％、高さを50ピクセルに指定すると、実際には高さ50ピクセルにしか拡大されません（非常に狭いウィンドウがない限り）。

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

100x50 triangle

実際に水平方向に伸ばしたい場合は、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>

300x50 triangle

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

380
Brian Campbell

あなたはそのような変換をしたいでしょう：

javaScriptで：

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

CSSでは：

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

SVGページをそのままGroupタグで囲み、ページ全体を操作するようにそれをターゲットにします。

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

注：スケール1.0は100％

18
Gary Hayes

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

最小x、最小y、幅、高さ

例：viewbox = "0 0 1000 1000"

Viewboxは基本的にSVGに描画するサイズと場所を指示するので重要な属性です。 SVGを1000 x 1000ピクセルにしてビューボックスを2000 x 2000にした場合は、SVGの 左上の四半期 が表示されます。

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

私のSVGは上下左右に移動する必要があります

これを調べます。viewbox = "50 50 450 450"

最初の2つの数字はあなたのSVGを左に50pxそして上に50pxシフトし、そして次の2つの数字はビューボックスのサイズです：450x450 px。あなたのSVGが500 x 500であるが、それにそれにいくらかの余分なパディングがあるならば、あなたはそれらを「ビューボックス」の中で動かすためにそれらの数を操作することができます。

この時点でのあなたの目標は、これらの数字のうちの1つを変更して、何が起こるのかを見ることです。

ビューボックスを完全に省略することもできますが、その場合は、その時点で設定されている他のすべての設定に応じて、表示範囲が変わります。私の経験では、ビューボックスが縦横比の定義に役立つため、縦横比の維持に関する問題に遭遇するでしょう。

PRESERVE ASPECT RATIO

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％に設定して、それが入っているコンテナーを埋めます。これが、おそらくこのStack Overflowの質問に答えるのに最も貢献しているものです。

あなたはそれをあなたが望むどんなピクセル値にでも変更することができます、しかし、私はそれを最大サイズまでそれを爆破してそれから親コンテナを通して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はそれ自身の縦横比を維持しているので、親コンテナ上で幅をリサイズ可能にするだけでよく、それは望み通りにリサイズします。

高さだけを残したり、autoに設定したり、幅を変更したりします。レスポンシブデザインのため、幅のほうが意味があるので幅を選びました。

これが使用されているこれらの設定のイメージです：

enter image description here

この質問のすべての解決策を読んでもまだ混乱しているか、必要なものがまったくわからない場合は、こちらのリンクをチェックしてください。とても参考になりました。

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

これは大規模な記事ですが、CSSの有無にかかわらず、SVGを操作するための可能な限りあらゆる方法について説明しています。気軽にコーヒーを飲んでいる間、またはあなたが選んだ特定の液体を選んでいる間、それを読むことを勧めます。

16
agm1984

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

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

FF + IE 11でも働いているようです。

13
Kerry7777

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

0
Fabian Madurai