svg : feOffset 路径

马黑黑

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>

效果如下：

马黑黑

【扩展知识】

滤镜需要 filter 标签包裹起来，语句结构如下：

<filter id="标识名称">
    <!-- 这里是滤镜代码 支持多个路径-->
</filter>

老旧浏览器可能不能识别上述滤镜表达方式，如果需要兼容它们，请这样使用路径：

<defs>
    <filter id="标识名称">
        <!-- 这里是滤镜代码 支持多个路径-->
    </filter>
</defs>

就是多了一层包裹布，最外层是 <defs> ... </defs>。

现代主流浏览器不在意有木有 defs 标签。

另外，filter 标签最好有唯一 id 标识，以便 svg 子元素 或 HTML 元素调用滤镜。可以在 CSS 中给子元素绑定滤镜：

filter: url(#id标识符)

svg子元素还可以用 filter= 方法绑定滤镜：

filter="url(#id标识符)"

千羽

进来打个卡，然后飘……

马黑黑

千羽 发表于 2023-10-8 19:24
进来打个卡，然后飘……

晚上嚎

马黑黑

醉美水芙蓉 发表于 2023-10-8 19:21
先给黑黑老师点个赞！瞧瞧老师又有什么新作品了？

这个是知识点分享，不见得一定需要跟作品捆绑

千羽

马黑黑 发表于 2023-10-8 19:35
晚上嚎

黑黑老师大声嚎

马黑黑

千羽 发表于 2023-10-8 19:46
黑黑老师大声嚎

一起嚎一起嚎

千羽

马黑黑 发表于 2023-10-8 20:08
一起嚎一起嚎

黑黑老师先嚎

红影

这个是svg的移动吧，只有2个方向的移动？看着倒是容易理解，只是需要记命令名称。

红影

这个也带id="标识名称"，看起来svg的都带这个呢。黑黑把标识名称都是用汉语拼音设置的呢，前面那个讲解也是的。这样好，容易理解

马黑黑

红影 发表于 2023-10-8 20:19
这个也带id="标识名称"，看起来svg的都带这个呢。黑黑把标识名称都是用汉语拼音设置的呢，前面那个讲解也是 ...

不一定用拼音，方便识别的就好

马黑黑

红影 发表于 2023-10-8 20:17
这个是svg的移动吧，只有2个方向的移动？看着倒是容易理解，只是需要记命令名称。

偏移。有水平、垂直方向就够了，支持负数的

马黑黑

千羽 发表于 2023-10-8 20:13
黑黑老师先嚎

红影

马黑黑 发表于 2023-10-8 21:18
不一定用拼音，方便识别的就好

这个是最容易识别的。

马黑黑

红影 发表于 2023-10-8 21:29
这个是最容易识别的。

不见得。不是人人懂拼音。

红影

马黑黑 发表于 2023-10-8 21:18
偏移。有水平、垂直方向就够了，支持负数的

哦，等于任何方向都能移动呢。

红影

马黑黑 发表于 2023-10-8 21:29
不见得。不是人人懂拼音。

大多数都知道吧，总比别的好点呢。

马黑黑

红影 发表于 2023-10-8 21:49
大多数都知道吧，总比别的好点呢。

我知道，很多人不懂拼音的

马黑黑

红影 发表于 2023-10-8 21:29
哦，等于任何方向都能移动呢。

是的