Farbverläufe definieren

Das <defs>-Element agiert als Definitions- bzw. Container-Element. In diesem Element werden andere Elemente definiert, die innerhalb des SVGs wiederverwendet werden, beispielsweise Farbverläufe definiert. Jedes Element innerhalb des <defs>-Elements wird mit einem id-Attribut versehen, sodass dieses von anderen Elementen im SVG referenziert werden kann.

<defs>
  <linearGradient id="MyGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop stop-color="#FFFFFF" />
    <stop stop-color="#FF0000" />
    <stop stop-color="#000000" />
  </linearGradient>
  <linearGradient id="MyGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0.0" stop-color="#FFFFFF" />
    <stop offset="0.2" stop-color="#EDEDED" />
    <stop offset="0.8" stop-color="#DADADA" />
    <stop offset="1.0" stop-color="#B3B3B3" />
  </linearGradient>
</defs>

Um einen Farbverlauf auf ein Element anzuwenden, verwenden Sie das Attribut fill auf dem jeweiligen Element und referenzieren Sie den entsprechenden Farbverlauf über seine Kennung, z. B. fill="url(#MyGradient1)".

<rect x="0" y="0" width="100" height="100" fill="url(#MyGradient1)" />

• Linearer Farbverlauf

• Radialer Farbverlauf