<feOffset>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <feOffset> SVG-Filterprimitive ermöglicht das Versetzen eines Eingabebildes relativ zu seiner aktuellen Position. Das gesamte Eingabebild wird um die in den Attributen dx und dy angegebenen Werte verschoben.

Nutzungskontext

KategorienPrimitives Filterelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
<animate>, <discard>, <set>

Attribute

DOM-Schnittstelle

Dieses Element implementiert die SVGFEOffsetElement-Schnittstelle.

Beispiel

SVG

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="offset" width="180" height="180">
      <feOffset in="SourceGraphic" dx="60" dy="60" />
    </filter>
  </defs>

  <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    stroke="black"
    fill="green"
    filter="url(#offset)" />
</svg>

Ergebnis

Spezifikationen

Specification
Filter Effects Module Level 1
# feOffsetElement

Browser-Kompatibilität

Siehe auch