SVG/Elemente/Definitionsabschnitt

Aus SELFHTML-Wiki
< SVG‎ | Elemente
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]