SVG shadow
Remarque: Internet Explorer et Safari ne supporte pas les filtres SVG!
<Defs> et <filtre>
SVG filtre tout Internet définis dans <defs> élément. <Defs> définit court et contient des éléments spéciaux (tels que les filtres) définition.
<Filtre> est utilisé pour définir le filtre SVG. <Filtre> avec l'attribut id requis pour définir l'application graphique qui filtre?
SVG <feOffset>
exemple 1
<FeOffset> est utilisé pour créer un effet d'ombre. L'idée est de prendre un graphique SVG (ou éléments d'image) et la déplacer un peu dans le plan xy.
Le premier exemple de décalage d'un rectangle (avec <feOffset>), puis mélangé haut décalage de l'image (y compris <feBlend>):
Voici le code SVG:
Exemples
<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>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
Analyse de code:
- Le seul nom <filter> attribut élément id définit un filtre
- Filtre Propriétés <rect> est utilisé pour relier les éléments à "f1" filtre
exemple 2
Maintenant, vous pouvez déplacer l'image devient floue (contenant <feGaussianBlur>):
Voici le code SVG:
Exemples
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
Analyse de code:
- stdDeviation <feGaussianBlur> élément propriété définit la quantité de flou
exemple 3
Maintenant faire une ombre noire:
Voici le code SVG:
Exemples
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
Analyse de code:
- Propriétés <feOffset> pour "SourceAlpha" utilisation flou dans le canal Alpha, plutôt que de l'ensemble des pixels RGBA.
exemple 4
Ombre est maintenant recouvert d'une couleur:
Voici le code SVG:
Exemples
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
Analyse de code:
- filtre <feColorMatrix> Offset est utilisé pour convertir une image pour le rendre plus proche de la couleur noire. '0,2' pour obtenir les trois valeurs sont multipliées par une matrice de canaux rouge, vert et bleu. Réduire sa valeur pour apporter de la couleur au noir (noir est 0)