<defs>

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 <defs> SVG-Element wird verwendet, um grafische Objekte zu speichern, die später verwendet werden sollen. Objekte, die innerhalb eines <defs>-Elements erstellt werden, werden nicht direkt gerendert. Um sie anzuzeigen, müssen Sie diese referenzieren (zum Beispiel mit einem <use>-Element).

Grafische Objekte können von überall aus referenziert werden. Das Definieren dieser Objekte innerhalb eines <defs>-Elements fördert jedoch das Verständnis des SVG-Inhalts und ist vorteilhaft für die allgemeine Zugänglichkeit des Dokuments.

Beispiel

html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" />

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>

Verwendungskontext

KategorienContainer-Element, Strukturelement
Erlaubter InhaltBeliebige 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
# Head

Browser-Kompatibilität

BCD tables only load in the browser