Question

我想动态更改SVG过滤器，以使用鼠标位置或其他变量。

这是一个例子：

let filter = document.getElementById("myFilterOffset");
document.addEventListener("mousemove", ev => {
  let viewportMouseX = ev.clientX / window.innerWidth;
  filter.setAttribute("dx", Math.floor(viewportMouseX * 500));
});

div {
  filter: url(#myFilter);
}

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
      <filter id="myFilter">
      <feOffset id="myFilterOffset" dx="0" dy="0">
      </filter>
  </defs>
</svg>
<div>Hello!</div>

第一次运行代码实际上是有效的，但只有第一次。即使在Chrome DevTools中，我看到的所有属性实际上仍在更改，所有后续调用都无济于事。我是否必须以某种方式强制重绘？如果可以，怎么办？

我还考虑过使用CSS定位#myFilterOffset并将CSS变量绑定到'dx'属性，然后使用JavaScript更改CSS变量，但这也不起作用，因为似乎无法更改dx使用CSS属性。

编辑：忘了我只在Chrome中测试过此功能。我想这似乎是一个错误。

Answer 1

const filter = document.getElementById("myFilterOffset");
const svg = document.getElementById("test");
document.addEventListener("mousemove", ev => {
  let viewportMouseX = ev.clientX / window.innerWidth;
  filter.setAttribute("dx", Math.floor(viewportMouseX * 500));
  svg.setAttribute("width","0");
});

div {
  filter: url(#myFilter);
}

<svg id="test" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
      <filter id="myFilter">
      <feOffset id="myFilterOffset" in="SourceGraphic" dx="0" dy="0">
      </filter>
  </defs>
</svg>
<div id="svg">Hello!</div>

您的dx属性已成功更改，但不会重新呈现。您只需设置SVG的宽度即可触发重新渲染。

如何使用JavaScript或CSS动态更改SVG过滤器？

1 个答案: