马黑黑 发表于 2023-10-8 18:50

svg : feOffset 路径

<style>
   .wrapper > p { margin: 8px 0; }
   .wrapper > pre { margin: 20px auto; width: 90%; padding: 16px; font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #efefef; white-space: pre-wrap; word-wrap: break-word; }
   .zs { color: green; }
</style>

<div class="wrapper">
   <p>feOffset 滤镜用于svg子元素偏移，滤镜属性主要有：</p>
   <pre>dx : 水平方向偏移量，例如，dx="20"
dy : 垂直方向偏移量，例如，dy="20"
in : 作用范围，例如作用于整个图像（滤镜内置值），in="SourceGraphic"</pre>
   <p>以下两组 svg 代码，画布规格均为200*200，其内的矩形从 {0,0} 画起，第一组未使用任何滤镜，第二组使用了 feOffset 滤镜，滤镜通过 dx 和 dy 设置了偏移量。查看效果，比较两个矩形的在画布中的具体位置：</p>
   <pre><span class="zs">&lt;--第一组 不使用滤镜 --&gt;</span>
&lt;svg height="200" width="200" style="border: 1px solid gray;"&gt;
   &lt;rect x="0" y="0" width="100" height="100" fill="olive" /&gt;
&lt;/svg&gt;

<span class="zs">&lt;--第二组 使用 feOffset 滤镜 --&gt;</span>
&lt;svg height="200" width="200" style="border: 1px solid gray;"&gt;
   &lt;filter id="pianyi"&gt;
      &lt;feOffset in="SourceGraphic" dx="10" dy="10" /&gt;
   &lt;/filter&gt;
   &lt;rect x="0" y="0" width="100" height="100" fill="olive" filter="url(#pianyi)" /&gt;
&lt;/svg&gt;</pre>
   <p>效果如下：</p>
   <svg height="200" width="200" style="border: 1px solid gray;">
      <rect x="0" y="0" width="100" height="100" fill="olive" />
   </svg>

   <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>
</div>

马黑黑 发表于 2023-10-8 19:01

【扩展知识】

滤镜需要 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:21

千羽 发表于 2023-10-8 19:24

进来打个卡，然后飘……{:4_173:}

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

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

晚上嚎

马黑黑 发表于 2023-10-8 19:36

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

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

千羽 发表于 2023-10-8 19:46

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

黑黑老师大声嚎{:4_173:}

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

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

一起嚎一起嚎

千羽 发表于 2023-10-8 20:13

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

黑黑老师先嚎{:4_173:}

红影 发表于 2023-10-8 20:17

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

红影 发表于 2023-10-8 20:19

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

马黑黑 发表于 2023-10-8 21:18

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

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

马黑黑 发表于 2023-10-8 21:18

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

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

马黑黑 发表于 2023-10-8 21:19

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

{:4_208:}

红影 发表于 2023-10-8 21:29

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

这个是最容易识别的。

马黑黑 发表于 2023-10-8 21:29

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

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

红影 发表于 2023-10-8 21:29

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

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

红影 发表于 2023-10-8 21:49

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

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

马黑黑 发表于 2023-10-8 23:01

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

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

马黑黑 发表于 2023-10-8 23:06

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

是的
页: [1] 2 3 4 5
查看完整版本: svg : feOffset 路径