请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
feDropShadow 滤镜创建输入图像的阴影。内置属性 dx、dy 分别表示水平方向和垂直方向的阴影偏移量,支持阴影模糊(stdDeviation),支持定义阴影颜色(flood-color)和阴影不透明度(flood-opacity),本质上和 CSS 的 drop-shadow 滤镜原理差不多。feDropShadow 语法:
<feDropShadow dx="水平偏移值" dy="垂直偏移值" stdDeviation="模糊度" flood-color="阴影颜色" flood-opacity="不透明度" />
下面,我们设置了三个滤镜组,分别作用于三个矩形:
代码:
<svg width="590" height="200">
<filter id="shadow1">
<feDropShadow dx="8" dy="8" stdDeviation="2" flood-color="#000" flood-opacity="0.9" />
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="green" flood-opacity="1" />
</filter>
<filter id="shadow3">
<feDropShadow dx="-6" dy="-4" stdDeviation="4" flood-color="#000" flood-opacity="0.85" />
</filter>
<rect x="20" y="20" width="160" height="160" fill="olive" filter="url(#shadow1)" />
<rect x="220" y="20" width="160" height="160" fill="olive" filter="url(#shadow2)" />
<rect x="410" y="20" width="160" height="160" fill="olive" filter="url(#shadow3)" />
</svg>
代码解析:
三个 filter 标签:每一个都有自己的 id 标识、内含一个 feDropShadow 滤镜,feDropShadow 滤镜的各属性值不尽一致。三个矩形 rect 标签:通过 filter 属性各绑定一个滤镜 id,将滤镜效果引用到自己身上。
【附】实体元素绑定滤镜的方法,还可以通过 CSS 设定,也是使用 filter 属性,试比较两种表达法的异同:
svg标签属性:filter="url(#shadow1)" ...
CSS样式属性: filter: url(#shadow1);
|