<svg>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das svg
-Element ist ein Container, der ein neues Koordinatensystem und einen Ansichtsbereich definiert. Es wird als äußerstes Element von SVG-Dokumenten verwendet, kann aber auch verwendet werden, um ein SVG-Fragment innerhalb eines SVG- oder HTML-Dokuments einzubetten.
Hinweis: Das xmlns
-Attribut ist nur auf dem äußersten svg
-Element von SVG-Dokumenten erforderlich oder innerhalb von HTML-Dokumenten mit XML-Serialisierung. Es ist nicht notwendig für innere svg
-Elemente oder innerhalb von HTML-Dokumenten mit HTML-Serialisierung.
Beispiele
Verschachteltes svg
-Element
Dieses Beispiel zeigt, dass verschachtelte svg
-Elemente das xmlns
-Attribut nicht benötigen.
<svg
viewBox="0 0 300 100"
xmlns="http://www.w3.org/2000/svg"
stroke="red"
fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
Verwendung dynamischer Ansichtsbereich-Einheiten
In diesem Beispiel werden die Attribute height
und width
des svg
-Elements mit dem dynamischen Ansichtsbereichswert 60vmin
festgelegt, was 60% der Breite oder Höhe des Ansichtsbereichs entspricht, je nachdem, welcher kleiner ist.
<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='60vmin' width='60vmin'>
<rect x='0' y='0' width='50%' height='50%' fill='tomato' opacity='0.75' />
<rect x='25%' y='25%' width='50%' height='50%' fill='slategrey' opacity='0.75' />
<rect x='50%' y='50%' width='50%' height='50%' fill='olive' opacity='0.75' />
<rect x='0' y='0' width='100%' height='100%' stroke='cadetblue' stroke-width='0.5%' fill='none' />
</svg>
Um die Dimensionen des iframes zu ändern, versuchen Sie, den gepunkteten roten Rand von der unteren rechten Ecke aus zu vergrößern oder zu verkleinern.
Attribute
baseProfile
Veraltet-
Das minimale SVG-Sprachprofil, das das Dokument erfordert. Wertetyp: <string> ; Standardwert: keiner; Animierbar: nein
height
-
Die angezeigte Höhe des rechteckigen Ansichtsbereichs. (Nicht die Höhe seines Koordinatensystems.) Wertetyp: <length>|<percentage> ; Standardwert:
auto
; Animierbar: ja preserveAspectRatio
-
Wie das
svg
-Fragment verzerrt werden muss, wenn es mit einem anderen Seitenverhältnis angezeigt wird. Wertetyp: (none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ; Standardwert:xMidYMid meet
; Animierbar: ja version
Veraltet-
Welche Version von SVG für den inneren Inhalt des Elements verwendet wird. Wertetyp: <number> ; Standardwert: keiner; Animierbar: nein
viewBox
-
Die SVG-Ansichtsbereichs-Koordinaten für das aktuelle SVG-Fragment. Wertetyp: <list-of-numbers> ; Standardwert: keiner; Animierbar: ja
width
-
Die angezeigte Breite des rechteckigen Ansichtsbereichs. (Nicht die Breite seines Koordinatensystems.) Wertetyp: <length>|<percentage> ; Standardwert:
auto
; Animierbar: ja x
-
Die angezeigte x-Koordinate des svg-Containers. Keine Wirkung auf äußerste
svg
-Elemente. Wertetyp: <length>|<percentage> ; Standardwert:0
; Animierbar: ja y
-
Die angezeigte y-Koordinate des svg-Containers. Keine Wirkung auf äußerste
svg
-Elemente. Wertetyp: <length>|<percentage> ; Standardwert:0
; Animierbar: ja
Hinweis: Beginnend mit SVG2 sind x
, y
, width
und height
Geometrie-Eigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften verwendet werden können.
Nutzungskontext
Kategorien | Container-Element, Strukturelement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # NewDocument |
Browser-Kompatibilität
BCD tables only load in the browser