SVG/Filter/feOffset

Aus SELFHTML-Wiki
< SVG‎ | Filter
Wechseln zu: Navigation, Suche

Der primitive Filter feOffset verschiebt eine Grafik. Er verhält sich also ähnlich wie transform:translate(), nur eben innerhalb eines Filters. In der Praxis wird feOffset häufig in Zusammenhang mit anderen Filtern verwendet, um einen Schatten zu erzeugen.[1]

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel ansehen …
<defs>
	<filter id="Offset" x="-10%" y="-10%" width="170%" height="170%">
		<feOffset dx="50" dy="20"/>
	</filter>
</defs>

<g transform="translate(100,100)">
	<text>Kein Filter</text>
	<rect width="200" height="200" fill="none" stroke="#333"/>
	<circle cx="100" cy="100" r="100" style="fill:#dafc20; stroke:#c32e04; stroke-width:10"/>
</g>

<g transform="translate(400,100)">
	<text>Offset</text>
	<rect width="200" height="200" fill="none" stroke="#333"/>
	<circle cx="100" cy="100" r="100" style="fill:#dafc20; stroke:#c32e04; stroke-width:10" 
            filter="url(#Offset)" />
</g>

feOffset nutzt dazu folgende Attribute:

  • dx: waagerechte Verschiebung
  • dy: senkrechte Verschiebung

Für dx und dy sind auch negative Werte zulässig, um die Grafik nach links bzw. oben zu verschieben.

Auf apike.ca können Sie in einer Live-Demo ausprobieren, wie Sie einen Schatten mittels dx und dy verschieben können.[2]

Quellen[Bearbeiten]

  1. W3C: feOffsetElement
  2. apike.ca: feOffset

Siehe auch[Bearbeiten]