El elemento SVG feOffset se utiliza para crear efectos de sombra paralela. Para crear una sombra paralela, tome un gráfico SVG (imagen o elemento) y mueva las coordenadas XY.
Sintaxis:
<feDropShadow dx="" dy="" stdDeviation=""/>
Atributos:
- dx: define el desplazamiento x
- dy: define el desplazamiento y
- stdDeviation: define la desviación estándar para la operación de desenfoque.
Ejemplo:
<html> <title>SVG Filter</title> <body> <svg width="400" height="400"> <defs> <filter id="filter2" x="0" y="0" width="150%" height="150%"> <feOffset result="offOut" dx="30" dy="30" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <g> <rect x="50" y="50" width="150" height="150" fill="gray" filter="url(#filter2)" /> </g> </svg> </body> </html>
Producción:
Ejemplo: Sombra sin desenfoque.
<html> <title>SVG Filter</title> <body> <svg width="400" height="400"> <defs> <filter id="filter2" x="0" y="0" width="150%" height="150%"> <feOffset result="offOut" dx="30" dy="30" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <g> <rect x="50" y="50" width="150" height="150" stroke="black" stroke-width="5" fill="gray" filter="url(#filter2)" /> </g> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA