SVG 下拉阴影 1
SVG <feDropShadow>
<feDropShadow>
滤镜用于为输入的图形创建下拉阴影效果。
这是 SVG 代码
示例
<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1">
<feDropShadow dx="12" dy="14" stdDeviation="1" flood-opacity="0.7"/>
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>
自己动手试一试 »
代码解释
- 元素
<filter>
的id
属性定义了滤镜的唯一名称。 - 下拉阴影效果由
<feDropShadow>
元素定义。 dx
属性定义了下拉阴影的 x 轴偏移量。dy
属性定义了下拉阴影的 y 轴偏移量。stdDeviation
属性定义了下拉阴影的模糊量。flood-opacity
属性定义了下拉阴影的不透明度(从 0 到 1)。- <rect> 元素的
filter
属性将元素指向 "f1" 滤镜。