用javascript動態修改SVG過濾器

Question

我正在嘗試創建一個動態模糊效果，可以使用JavaScript進行修改。

首先，我用這個非常簡單的SVG濾鏡：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="blur"> 
<feGaussianBlur stdDeviation="0" /> 
</filter> 
</svg> 

的stdDeviation從0開始的，我希望能夠改變這種使用JavaScript。我嘗試了一些不同的東西，但我還沒有完全明白。

首先，（我應該注意，我使用jQuery）我想簡單地選擇feGaussianBlur元素，並修改它的屬性：

$('feGaussianBlur').attr('stdDeviation',5); 

像我預計這並不會取代現有的屬性，而是添加了另一個，使我留下了<feGaussianBlur stdDeviation="0" stdDeviation="5" /> 從HTML中刪除原始stdDeviation使得在更改後只有一個屬性，但它沒有效果。

接下來，我試圖簡單地用更換新的過濾器中的內容：

$('filter#blur').html('<feGaussianBlur stdDeviation="5" />'); 

這一次，它不僅沒有改變成功，但它造成的元素，這個過濾器應用到，完全消失（我假設過濾器被損壞，或者其他）。

我甚至嘗試重新應用過濾器後的css聲明，以前的兩種情況。

我嘗試過DID工作的一件事是構建出10個不同的過濾器，其中包含10個不同的值，然後，而不是使用JavaScript更改SVG，我只是將CSS重新分配給了不同的過濾器ID。說實話，這種方法似乎更適合？但是，最大的缺點在於它不是很通用，而且需要很多工作來改變。另外，我更願意使用帶有小數位的值，這需要完成100個過濾器聲明。

所以，我的問題是...有沒有一種很好的方式來動態修改SVG過濾器（在我的例子中，模糊過濾器具體）使用JavaScript？如果存在，在語義和標準方面是否是一種可敬的方法？如果沒有其他的東西，我很樂意回到我的解決方案，使用一些（我可以不加小數地生活）過濾器並將它們交換出來，但我想先探索我的選擇。或者，如果您沒有解決方案，但至少可以向我解釋爲什麼我的第一對夫婦嘗試不起作用，請告訴我！我很好奇原因是什麼。

Answer 1

這會使用普通的DOM而不是jQuery來做到這一點。移動ID到feGaussianBlur元素

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter> 
<feGaussianBlur id="blur" stdDeviation="0" /> 
</filter> 
</svg> 

然後

document.getElementById("blur").setAttribute("stdDeviation", "5"); 

或可替代

document.getElementById("blur").setStdDeviation(5, 5);