是否可以動態地扭曲SVG文本？

例如，您是否可以將filters與基於某些時態數據的移位參數一起應用？

感謝。

2017-04-07 conner.xyz

是的，這是可能的，但你必須更好地解釋你在做什麼才能得到更有用的答案。 – 4castle

是的，這是可能的：

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動畫雖然（SMIL代碼段由@kaiido提供）：

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

來源

2017-04-07 04:24:42

您應該至少使用'requestAnimationFrame'循環來代替這個setInterval。這裏是一個SMIL演示：https：//jsfiddle.net/x7n7r0Lf/ – Kaiido

@Kaiido問題是：*是否有可能？*我限制自己證明這是可能的，並且在我的回答結束時注意到它可能更好地使用動畫。你應該把你的小提琴變成一個答案。 –

不，它會和你的一樣：「是的，這是可能的」。所以我只是給你在評論中談到的這個*動畫，希望它是有用的，並且讓你知道你應該用'requestAnimationFrame'循環更新你的js版本，因爲這是用於定時函數視覺動畫。 – Kaiido

是否可以動態地扭曲SVG文本？

回答

相關問題