1.1 SVG阴影
1.1.1 <defs> 和 <filter>
所有互联网的SVG滤镜定义在<defs>元素中。
<defs>元素是定义的缩写并含有特殊元素(如滤镜)定义。
<filter>标签用来定义SVG滤镜。
<filter>元素具有必须的id属性,用于标识滤镜。图形然后指向要使用的滤镜。
1.1.2 <feOffset>
<feOffset>元素是用于创建阴影效果;想法是采取一个SVG图形(图像或元素)并将其在xy平面中移动一点,然后将原始图像混合在偏移图像的顶部(使用<feBlend>)
示例:偏移一个矩形
示例代码:
<svg>
<!-- 定义滤镜 defs 是一个定义标签 -->
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<!-- 使用偏移滤镜 -->
<feOffset result="offset" in="SourceGraphic" dx="20" dy="20" />
<!-- 滤镜:正常 -->
<feBlend in="SourceGraphic" in2="offset" mode="normal" />
<!-- 滤镜:正片叠底 -->
<!-- <feBlend in="SourceGraphic" in2="offset" mode="multiply" /> -->
</filter>
</defs>
<rect width="90" height="90" stroke="black" stroke-width="3" fill="orange" filter="url(#f1)" />
</svg>
- <filter>元素id属性定义一个滤镜的唯一名称
- <rect>元