Tutoriales de SVG

SVG 元素

Colección de ejemplos de SVG Efectos de desenfoque SVG

Sombra SVG

在SVG中，为了显示阴影效果，使用了 <feOffset>元素。要实现阴影效果，我们取SVG图形并将其在xy平面中移动一点,Internet Explorer和Safari不支持SVG滤镜！

在线示例

下面实现一个紫色的背景阴影效果:

示例

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0" width="200%" height="200%">
　　　　　　<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
　　　　　　<feGaussianBlur　resultado="desenfoque"　in="offOut"　desviaciónEstándar="10></feGaussianBlur>
　　　　　　<feBlend　in="SourceGraphic"　in2="blurOut"　mode="normal"></feBlend>
　　　　</filtro>
　　</defs>
　　<rect　ancho="90"　alto="90" stroke="blue" stroke-ancho="3" fill="purple" filter="url(#p1)"　/>
　　</svg>

测试看看‹/›

Nota: Internet Explorer 9No se admiten filtros SVG en versiones anteriores.

El efecto después de ejecutar es el siguiente:

用法解释

<filter> 的id属性定义了模式的唯一名称。
1,

制作一个黑色的阴影

示例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<defs>
　　　　<filter id="f1" x="0" y="0" width="200%" height="200%">
　　　　　　<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20"　/>
　　　　　　<feGaussianBlur　resultado="desenfoque"　in="offOut"　desviaciónEstándar="10"　/>
　　　　　　<feBlend　in="SourceGraphic"　in2="desenfoque"　modo="normal"　/>
　　　　</filtro>
　　</defs>
　　<rect　ancho="90"　alto="90"　trazo="verde"　trazo-ancho="3"　relleno="amarillo"　filtro="url(#f1)"　/>
</svg>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Nota: Internet Explorer 9No se admiten filtros SVG en versiones anteriores.

Colección de ejemplos de SVG Efectos de desenfoque SVG