<view>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Oktober 2018.
* Some parts of this feature may have varying levels of support.
Das <view> SVG-Element definiert eine bestimmte Ansicht eines SVG-Dokuments. Eine spezifische Ansicht kann angezeigt werden, indem die id des <view>-Elements als Ziel-Fragment einer URL referenziert wird.
Verwendungskontext
| Kategorien | Keine |
|---|---|
| Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Beschreibende Elemente |
Attribute
preserveAspectRatio-
Dieses Attribut definiert, wie das SVG-Fragment verzerrt werden muss, wenn es in einem Container mit einem anderen Seitenverhältnis eingebettet ist. Werttyp: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; Standardwert:xMidYMid meet; Animierbar: ja viewBox-
Dieses Attribut definiert die Begrenzung des SVG-Viewports für das Musterfragment. Werttyp: <list-of-numbers>; Standardwert: keiner; Animierbar: ja
zoomAndPanVeraltet-
Dieses Attribut gibt an, ob das SVG-Dokument vergrößert und verschoben werden kann. Werttyp: disable | magnify; Standardwert: magnify; Animierbar: nein
DOM-Schnittstelle
Dieses Element implementiert die SVGViewElement-Schnittstelle.
Beispiel
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="three circles" width="300" height="100" />
<br />
<img src="example.svg#three" alt="blue circle" width="100" height="100" />
Ergebnis
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ViewElement |
Browser-Kompatibilität
Loading…