SVG-Linienverlauf
- 上一页 Vorherige Seite
- SVG-Verwischung SVG-Linienverlauf
Kursempfehlung:
<defs> und <filter> <defs>
Alle SVG-Filter sind in<defs>
in dem Element definiert.
Das Element wird verwendet, um SVG-Filter zu definieren.
Das Element ist eine Abkürzung für (definitions), das Definitionen (z.B. Filter) enthält.Das Element wird verwendet, um SVG-Filter zu definieren.
<filter>
Das <feOffset>-Element hat eine notwendige id-Eigenschaft, um den Filter zu identifizieren. Dann verweist das Grafik auf den zu verwendenden Filter.
Beispiel 1
Das Element wird verwendet, um Schattenwirkungen zu erzeugen. Der Ansatz ist: Zuerst wird ein SVG-Grafik (Bild oder Element) erhalten, dann wird es leicht auf der xy-Ebene verschoben.
Der erste Beispiel hat einen Rechteck verschoben (verwenden ,
<feBlend>
,
Dies ist der SVG-Code:
<svg height="120" width="120"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="grün" stroke-width="3" fill="gelb" filter="url(#f1)" /> </svg>
Code-Explainierung:
- Die id-Eigenschaft des <filter>-Elements definiert den eindeutigen Namen des Filters
- <rect>-Elementeigenschaft filter verknüpft das Element mit dem Filter "f1"
Beispiel 2
Jetzt kann das Bild verschwommen werden (verwenden ,
Dies ist der SVG-Code:
<svg height="140" width="140"> <defs> <filter id="f2" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="grün" stroke-width="3" fill="gelb" filter="url(#f2)" /> </svg>
Code-Explainierung:
- <feGaussianBlur>-Elementeigenschaft stdDeviation definiert den Betrag der Verzerrung
Beispiel 3
Nun, stellen Sie den Schatten in Schwarz ein:
Dies ist der SVG-Code:
<svg height="140" width="140"> <defs> <filter id="f3" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="grün" stroke-width="3" fill="gelb" filter="url(#f3)" /> </svg>
Code-Explainierung:
- Das Attribut 'in' des Elements <feOffset> wird auf 'SourceAlpha' geändert, es verwendet den Alpha-Kanal anstatt des gesamten RGBA-Pixels für dasBlur
Beispiel 4
Nun, behandeln Sie den Schatten als eine Farbe:
Dies ist der SVG-Code:
<svg height="140" width="140"> <defs> <filter id="f4" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" /> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="grün" stroke-width="3" fill="gelb" filter="url(#f4)" /> </svg>
Code-Explainierung:
- <feColorMatrix> Der Filter wird verwendet, um die Farben eines verschobenen Bildes in etwas Näheres an Schwarz zu konvertieren. Die drei Werte '0.2' im Matrix werden mit den Rot-, Grün- und Blau-Kanälen multipliziert. Eine Verringerung ihrer Werte bringt die Farben näher an Schwarz (Schwarz ist 0).
- 上一页 Vorherige Seite
- SVG-Verwischung SVG-Linienverlauf