Question

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

例如，您是否可以根据某些时态数据应用filters移位参数？

感谢。

Answer 1

是的，可能：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

可能更好地使用CSS或SMIL动画（@kaiido提供的SMIL片段）：

＆＃13;

<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>

＆＃13;

是否有可能动态扭曲SVG文本？

1 个答案: