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

Question

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

例如，您可以根据某些时间数据应用具有移动参数的过滤器吗？

谢谢。

Answer 1

是的，有可能：

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>