Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

SVG/Elemente/Definitionsabschnitt

Aus SELFHTML-Wiki
< SVG‎ | Elemente(Weitergeleitet von Defs)
Wechseln zu: Navigation, Suche

Sie können mit dem defs-Element Definitionsabschnitte festlegen. Diese können script- und style-Elemente, sowie Farbverläufe, Muster oder Filter und andere Objekte enthalten.

In Definitionsabschnitten enthaltene Objekte oder Animationspfade werden nicht dargestellt, sondern nur definiert. Wenn Sie diese Objekte mit einer ID versehen, können Sie sie im Hauptteil durch url(#element_id) referenzieren.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<svg> <defs> <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf3" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> </defs> <rect id="eins" x="10" y="10" width="150" height="200" fill="url(#verlauf1)" /> <rect id="zwei" x="180" y="10" width="150" height="200" fill="url(#verlauf2)" /> <rect id="drei" x="350" y="10" width="150" height="200" fill="url(#verlauf3)" /> </svg>


Referenz[Bearbeiten]