SVGテキストを動的に歪めることは可能ですか？

Question

SVGテキストを動的に歪めることは可能ですか？

たとえば、いくつかの時間的データに基づいてシフトパラメータを適用してfiltersを適用できますか？

ありがとうございました。

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>

を