SVG过滤器使用feImage作为feDisplacementMap的输入[关闭]答案

【问题标题】：SVG Filter using feImage as input to feDisplacementMap [closed]SVG过滤器使用feImage作为feDisplacementMap的输入[关闭]
【发布时间】：2021-11-05 06:28:21
【问题描述】：

我正在尝试使用 svg 过滤器向图像添加置换贴图。这是我的代码：

<svg width="300" height="300">
    <filter id="a" filterUnits="userSpaceOnUse" x="0" y="0" width="300" height="300">
      <feImage xlink:href="https://i.imgur.com/TKNyL9Q.jpg" result="heatmap"/>
      <feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="G" in2="heatmap" in="SourceGraphic"/>
    </filter>
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="300" width="300" filter="url(#a)" />
  </svg>

这应该是获取小猎犬图像并对其应用网格置换贴图，但它没有效果。

奇怪的是，在<feDisplacementMap> 标记中将in 与in2 切换确实有效，但反过来显示带有小猎犬地图的网格图像很好。

这是一个codepen 示例。

为什么它只能以一种方式工作？

【问题讨论】：

我认为代码很好。您可以在 xChannelSelector | MDN 上看到类似的内容。我可以使这个过滤器工作的唯一方法是运行来自同一域的 all 文件。我正在运行 Firefox 91。
@chrwahl 谢谢。我已经在 Chrome 93.0.4577.63 上测试过，使用本地文件运行时没有区别。
听起来您直接从文件系统测试了文件。如果您的计算机上有这些文件，则需要使用 SVG/HTML 文件、feImage 和 beagle 图像运行 Web 服务器。
@chrwahl 哦，有趣的是，托管它确实可以解决它。谢谢
我认为知道文件必须在同一个域中，并且在本地测试时必须运行 Web 服务器，这些信息足以作为完整的答案。 @chrwahl

标签： javascript html css svg svg-filters

【解决方案1】：

似乎 in & in2 参数需要与源图形本身而不是 .heatmap 匹配。

我将第一个：“带有热图过滤器的 Beagle”修改为：

<feDisplacementMap scale="15" xChannelSelector="R" yChannelSelector="G" in2="SourceGraphic" in="SourceGraphic"/><!-- -->
    </filter>

让我知道这是否是您正在寻找的结果？

【讨论】：

感谢您的回答，但这不是我所追求的。您的代码使用小猎犬图像作为图像和置换贴图，但我想使用热图/网格图像作为置换贴图。