Ist es möglich, SVG-Text dynamisch zu verzerren?

Question

Ist es möglich, SVG-Text dynamisch zu verzerren?

Zum Beispiel könnten Sie filters mit Verschiebungsparameter basierend auf einigen temporalen Daten anwenden?

Danke.

Answer 1

Ja, es ist möglich:

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>

Wahrscheinlich besser CSS oder SMIL Animation zu verwenden, obwohl (SMIL von @kaiido bereitgestellt Snippet):

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