代码之家 › 专栏 › 技术社区 › Freddy Muskelberg

如何使用javascript或css动态更改svg过滤器?

svg-filters svg javascript

Freddy Muskelberg · 技术社区 · 7 年前

我想动态地更改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浏览器中我可以看到属性实际上仍然在改变。我是不是一定要重画什么的?如果是这样,怎么办?

我还想过使用css来定位myfilteroffset,并将css变量绑定到'dx'属性,然后使用javascript更改css变量,但这也不起作用,因为似乎不可能使用css更改dx属性。

编辑:忘了说我只在chrome中测试过这个。我想是虫子吧。

1 回复 | 直到 7 年前

Vikas 7 年前

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>