<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 创建一个阴影效果 -->
<defs>
<filter id="shadowFilter" x="0" y="0" width="150%" height="150%">
<feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="black" />
</filter>
</defs>
<!-- 在矩形元素上应用阴影效果 -->
<rect x="20" y="20" width="150" height="60" fill="blue" filter="url(#shadowFilter)" />
</svg>
在这个例子中,<filter> 元素定义了一个名为 "shadowFilter" 的滤镜,其中使用了 <feDropShadow> 来实现阴影效果。dx 和 dy 属性表示阴影的水平和垂直偏移,stdDeviation 属性表示阴影的模糊程度,flood-color 属性表示阴影的颜色。
然后,矩形元素 <rect> 使用 filter 属性引用了这个滤镜,从而在矩形上应用了阴影效果。
你可以根据需要调整 <feDropShadow> 元素的属性来改变阴影的位置、模糊程度和颜色。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12389/SVG