SVG viewBox 確認サンプル

以下は svg 要素の viewBox の値や表示領域（ビューポート）のサイズである width や height を変更するとどのように見えるかを確認するサンプルです。

更新日：2022年03月10日

作成日：2020年12月14日

関連ページ：HTML SVG の基本的な使い方

サンプル

初期表示の状態では、表示領域（ビューポート）の大きさは幅：400px、高さ：300px で、ビューボックスの値は viewBox="0 0 400 300" です。

スライダーでそれぞれの値を変更して円の位置や大きさの変化を確認することができます。

赤枠の四角形はビューボックスのガイドとして使うことを想定しています。

「Apply」ボタンを押すと、赤枠の四角形に指定されている位置と幅と高さを svg 要素の viewBox の値に適用して表示します。

例えば初期表示の状態で「Apply」ボタンを押すと、svg 要素の viewBox の値を 100 100 200 150 にして表示します。

svg 要素と四角形の縦横比が同じであれば、「Apply」ボタンを押すと四角形は表示領域いっぱいに広がります。縦横比が異なる場合は preserveAspectRatio のプルダウンで、none を選択すると四角形は表示領域いっぱいに広がりますが円は楕円になります。

overflow で visible を選択すると svg 要素に overflow: visible が適用され表示領域外も表示されます。

赤枠の四角形を非表示にするには、四角形の幅または高さを0にします。

Reset ボタンを押すと初期表示の状態に戻ります。

<svg width="400" height="300" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet" >
  <circle cx="200" cy="150" r="50" stroke-width="5"/>
  <rect x="100" y="100" width="200" height="150"/>
</svg>

ビューポート（svg 要素の width と height）
width		400
height		300
ビューボックス（x座標, y座標, 幅, 高さ）
min-x		0
min-y		0
width		400
height		300
overflow	hidden visible

円（SVG circle）の値
cx（中心のx座標）		200
cy（中心のy座標）		150
r（半径）		50
四角形（SVG rect）の値
x（左上のx座標）		100
y（左上のy座標）		100
width（幅）		200
height（高さ）		150

preserveAspectRatio

サンプルコード

上記サンプル（初期状態）の実際のコードです。HTML5 の場合は xmlns 属性は省略可能です。

preserveAspectRatio 属性はデフォルトでは xMidYMid meet なので初期状態では省略しています。

overflow はラジオボタンの visible が選択された場合、CSS で overflow: visible を設定しています。svg 要素に直接 overflow="visible" のように属性として設定することもできます。

<svg id="viewbox_sample" xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <circle cx="200" cy="150" r="50" stroke="#5994FF" stroke-width="5" fill="#83C3FF"/>
  <rect x="100" y="100" width="200" height="150" stroke="red" stroke-width="2" fill="none"/>
</svg>

svg#viewbox_sample {
  display: block;
  margin: 30px auto;
  background-color: #FADFDF;
  border: 1px solid #ccc;
}

jQuery attr() では viewBox を操作できない

jQuery の attr() メソッドを使って以下のように viewBox 属性を変更しようとしてもうまきいきません。

attr() メソッドで属性を viewBox（キャメルケース）と指定していますが、jQuery により viewbox（全て小文字）に変換されてしまい、別の属性として追加されます。

$("#viewbox_sample").attr('viewBox', "0 0 200 100");
//viewBox が viewbox（全て小文字）に変換されてしまう

上記を実行すると、viewbox（全て小文字）という属性が追加されてしまいます。

<svg id="viewbox_sample" width="400" height="300" viewBox="0 0 400 300" viewbox="0 0 200 100">

JavaScript の setAttribute() を使う

viewBox などキャメルケースの属性を操作する場合は JavaScript の setAttribute() メソッドを使います。

document.getElementById("viewbox_sample").setAttribute("viewBox","0 0 200 100");

Web Design Leaves