SVG feOffset 标签

简介

该输入图像作为一个整体,在属性 dx 和属性 dy 的值指定了它的偏移量。
它有三个专用属性

属性 说明
in 标识输入的原语
dx x 轴的偏移值
dy y 轴的偏移值

实例

  • 偏移一个矩形,然后混合偏移图像顶部;
  • 制作一个带阴影的矩形;
<svg version="1.1" height="200" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feOffset" x="0" y="0" width="200%" height="200%">
            <feOffset dx="20" dy="20" in="SourceGraphic" result="offset"/>
            <feBlend in="SourceGraphic" in2="offset" mode="normal" />
        </filter>
        <filter id="filterShadow" x="0" y="0" width="200%" height="200%">
            <feOffset dx="10" dy="10" in="SourceAlpha" result="offset"/>
            <feGaussianBlur result="shadow" in="offset" stdDeviation="8" />
            <feBlend in="SourceGraphic" in2="shadow" mode="normal" />
        </filter>
    </defs>
    <rect x="10" y="10"  width="100" height="100" fill="green" stroke="blue" stroke-width="2" filter="url(#feOffset)"/>
    <rect x="150" y="10" width="100" height="100" fill="red" stroke="blue" stroke-width="2" filter="url(#filterShadow)"/>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注