<view>
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年10月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
<view> は SVG の要素で、 SVG 文書の具体的なビューを定義します。特定のビューは、<view> 要素の id を URL のターゲットフラグメントとして参照することで表示できます。
使用コンテキスト
| カテゴリー | 無し |
|---|---|
| 許可されている内容 | 任意の数、任意の順序の以下の要素。 説明的要素 |
属性
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
<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
html
<img src="example.svg" alt="3 つの丸" width="300" height="100" />
<br />
<img src="example.svg#three" alt="青い丸" width="100" height="100" />
結果
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # ViewElement |