html - 是否可以动态扭曲SVG文本？

是否可以动态扭曲SVG文本？

例如，您是否可以将filters与基于某些时间数据的移位参数一起应用？

谢谢。

最佳答案

是的，有可能：

let step = () => {
  let blur = document.querySelector('svg > #blur > feGaussianBlur');
  let value = parseFloat(blur.getAttribute('stdDeviation'));
  blur.setAttribute('stdDeviation', value * 1.05);

  requestAnimationFrame(step);
};

requestAnimationFrame(step);

<svg width="250" height="100"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
  </filter>

  <text x="15" y="50" font-size="35" filter="url(#blur)">Hello world!</text>
</svg>

不过，使用CSS或SMIL动画可能更好（@kaiido提供的SMIL代码段）：

<svg width="250" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0">
      <animate attributeType="XML" attributeName="stdDeviation" from="0" to="5" dur="1s" begin="0s; backward.end + 1s" id="forward" />
      <animate attributeType="XML" attributeName="stdDeviation" from="5" to="0" dur="1s" begin="forward.end" id="backward" />
    </feGaussianBlur>
  </filter>

  <text x="15" y="50" font-size="35" filter="url(#blur)">Hello world!</text>
</svg>