<view>

使用コンテキスト

属性

preserveAspectRatio

この属性は、 SVG の断片がアスペクト比異なるコンテナーに埋め込まれた場合、どのように変形するべきかを定義します。 値の型: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; 既定値: xMidYMid meet; アニメーション: 可

viewBox

この属性は、現在の SVG 断片の SVG ビューポートの境界を定義します。 値の型: <list-of-numbers>; 既定値: none; アニメーション: 可

zoomAndPan

この属性は、SVG文書が拡大・縮小およびパン操作することができるかどうかを指定します。 値の型: disable | magnify; 既定値: magnify; アニメーション: 不可

DOM インターフェイス

この要素は SVGViewElement インターフェイスを実装しています。

例

SVG

<svg viewBox="0 0 300 100" width="300" height="100"
      xmlns="http://www.w3.org/2000/svg">

  <view id="one" viewBox="0 0 100 100" />
  <circle cx="50" cy="50" r="40" fill="red" />

  <view id="two" viewBox="100 0 100 100" />
  <circle cx="150" cy="50" r="40" fill="green" />

  <view id="three" viewBox="200 0 100 100" />
  <circle cx="250" cy="50" r="40" fill="blue" />
</svg>

HTML

<img src="example.svg" alt="3 つの丸" width="300" height="100" />
<br />
<img src="example.svg#three" alt="青い丸" width="100" height="100" />

結果

仕様書

ブラウザーの互換性