Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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]