SVG/Element/view
Aus SELFHTML-Wiki
Das view-Element legt für eine SVG-Grafik oder ein durch einen Fragmentbezeichner (fragment-identifier) definierten Teilbereich eine alternative Ansicht fest, z.B durch eine Zoom- oder Detail-Ansicht.
- Syntax
- Start-Tag: notwendig
- End-Tag: notwendig
- Elternelemente
- Darf vorkommen in:
- erlaubte Inhalte
- desc, metadata, title
Name | Inhalt | Standardwert | Bedeutung |
---|---|---|---|
preserveAspectRatio | defer, align, meetOrSlice | xMidYMid meet | legt Seitenverhältnis fest |
viewBox | CDATA | ||
viewTarget | XML-Name | gibt Namen des Ziels an | |
zoomAndPan | disable, magnify | magnify | legt fest, ob Dokument gezoomt werden kann |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Beispiel
<defs>
<view id='warenkorb-icon' viewBox='64 0 32 32' />
</defs>
<img src='icons.svg#warenkorb-icon alt="Warenkorb Icon"/>
Das Warenkorb-Icon wird mit dem view-Element passend skaliert und dann im img referenziert.
Beachten Sie: Da das View-Element nicht gerendert wird, sollte es im Definitionsabschnitt festgelegt und dann innerhalb eines img-Element im HTML oder über das SVG-Element aufgerufen werden.
Empfehlung: Einen ähnlichen Effekt können Sie in SVG in HTML erreichen, wenn Sie ein Fragment mit use aufrufen.
→ SVG/Tutorials/Icons
→ SVG/Tutorials/Icons
Weblinks
- W3C: View Element
- css-tricks: How SVG Fragment Identifiers Work