请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
feOffset 滤镜用于svg子元素偏移,滤镜属性主要有:
dx : 水平方向偏移量,例如,dx="20"
dy : 垂直方向偏移量,例如,dy="20"
in : 作用范围,例如作用于整个图像(滤镜内置值),in="SourceGraphic"
以下两组 svg 代码,画布规格均为200*200,其内的矩形从 {0,0} 画起,第一组未使用任何滤镜,第二组使用了 feOffset 滤镜,滤镜通过 dx 和 dy 设置了偏移量。查看效果,比较两个矩形的在画布中的具体位置:
<--第一组 不使用滤镜 -->
<svg height="200" width="200" style="border: 1px solid gray;">
<rect x="0" y="0" width="100" height="100" fill="olive" />
</svg>
<--第二组 使用 feOffset 滤镜 -->
<svg height="200" width="200" style="border: 1px solid gray;">
<filter id="pianyi">
<feOffset in="SourceGraphic" dx="10" dy="10" />
</filter>
<rect x="0" y="0" width="100" height="100" fill="olive" filter="url(#pianyi)" />
</svg>
效果如下:
|