【SVG阴影效果使用示例】在SVG中, 为了显示阴影效果, 使用了<
feOffset>
元素。要实现此效果, 请拍摄SVG图形并将其在x-y平面中移动一点。
例子
<
!DOCTYPE html>
<
html>
<
body>
<
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" />
<
feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<
feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
<
/filter>
<
/defs>
<
rect width="90" height="90" stroke="blue" stroke-width="3" fill="purple" filter="url(#p1)" />
<
/svg>
<
/body>
<
/html>
立即测试
解释
- < filter> 的id属性定义了模式的唯一名称。
- < rect> 元素的filter属性用于将元素链接到” p1″ 过滤器。
推荐阅读
- SVG feComponentTransfer过滤器用法示例
- SVG feBlend过滤器用法示例
- SVG动画介绍和用法示例
- SVG animateTransform元素示例
- SVG animateMotion元素用法示例
- SVG动画（使用时间介绍和示例）
- SVG事件监听器用法示例
- 爸爸去哪儿第4季萌娃gif动态表情包大全_微信
- 微信公众号历史文章怎样找？微信公众号历史文章搜索办法_微信