SVG Drop Shadows
<defs> en <filter>
Alle SVG-filters word binne 'n <defs>-element gedefinieer. Die <defs>-element is kort vir definisies en bevat definisie van spesiale elemente (soos filters).
Die <filter>-element word gebruik om 'n SVG-filter te definieer. Die <filter>-element het 'n vereiste id-kenmerk wat die filter identifiseer. Die grafika wys dan na die filter om te gebruik.
SVG <feOffset>
Voorbeeld 1
Die <feOffset>-element word gebruik om slagsdu-effekte te skep. Die idee is om 'n SVG-grafika (prent of element) te neem en dit 'n bietjie in die xy-vlak te skuif.
Die eerste voorbeeld verreken 'n reghoek (met <feOffset>), meng dan die oorspronklike bo-op die offset-prent (met <feBlend>):
Hier is die SVG-kode:
Voorbeeld
<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="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Kode verduideliking:
- Die id-kenmerk van die <filter>-element definieer 'n unieke naam vir die filter
- Die filterkenmerk van die <rect>-element koppel die element aan die "f1"-filter
Voorbeeld 2
Nou kan die offset-beeld vervaag word (met <feGaussianBlur>):
Hier is die SVG-kode:
Voorbeeld
<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="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>
Kode verduideliking:
- Die stdDeviation-kenmerk van die <feGaussianBlur>-element definieer die hoeveelheid vervaag
Voorbeeld 3
Maak nou die skaduwee swart:
Hier is die SVG-kode:
Voorbeeld
<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="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
Kode verduideliking:
- Die in-kenmerk van die <feOffset>-element word verander na "SourceAlpha" wat die Alpha-kanaal gebruik vir die vervaag in plaas van die hele RGBA-pixel
Voorbeeld 4
Behandel nou die skaduwee as 'n kleur:
Hier is die SVG-kode:
Voorbeeld
<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="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>
Kode verduideliking:
- Die <feColorMatrix>-filter word gebruik om die kleure in die offset-beeld nader aan swart te transformeer. Die drie waardes van '0.2' in die matriks word almal vermenigvuldig met die rooi, groen en blou kanale. Die vermindering van hul waardes bring die kleure nader aan swart (swart is 0)