<view>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年10月.
* Some parts of this feature may have varying levels of support.
<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 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" />
結果
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ViewElement |
ブラウザーの互換性
Loading…