SVG使用jQuery，高斯過濾器不起作用

我有一個問題：我使用jQuery使用requirejs繪製圓圈。我添加了用於繪製的高斯濾鏡。但在此之後，沒有可見的圓圈。這是我的代碼的有趣的部分：SVG使用jQuery，高斯過濾器不起作用

define(['jquery'], function($) { 
var canvas = $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')); 
canvas.attr({ 'version': '1.1', 'width': 1000, 'height': 500 }); 
$('body').append(canvas);

有趣的部分：

::::

$('svg').append("<defs></defs>");

$('defs').append("<filter id=\x27f1\x27 x=\x270\x27 y=\x270\x27></filter>");

$('filter').append("<feGaussianBlur stdDeviation=\x2715\x27 />");
:::::

require(['Circle'],function(Circle){ 
for(i = 0; i < zahlen.length; i+=2){ 
    var circ = new Circle(zahlen[i],zahlen[i+1]); 
    circ.draw(canvas); 
} 

});

}）;

在我circle.js：

draw: function(canvas) { 
    canvas = canvas instanceof jQuery ? $(canvas) : canvas; 

    this.circle = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')); 
    this.circle.attr({ 
    filter: "url(#f1)", 
    stroke:"green", 
    fill: this.color 
    });

我認爲它應該像這樣工作。如果我刪除行「過濾器‘網址（＃F1）’的圓圈是可見的，一切都很好（但我想這個過濾器）你能找出一個錯誤，我提前做感謝

來源

2015-04-03 amberthx

我想你所犯的錯誤是使用jQuery與SVG。 – 2015-04-03 17:52:35

這有什麼不對？你的答案也沒有幫助我。 – amberthx 2015-04-03 18:04:05

爲什麼不做小提琴？幫助他人排除故障。 – Shikkediel 2015-04-03 19:05:09

你有沒有？停下來想知道爲什麼你的一些代碼的使用：

$(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));

，而不是這個

$("<svg></svg>");

使用jQuery創建這樣的元素不起作用jQuery是設計爲僅在HTML操作，並創建元素？在默認（即HTML）的名稱高手。而SVG元素必須位於SVG名稱空間中。*

對於您創建的所有SVG元素，您需要使用createElementNS()方法。

*至少要等到SVG2出來

來源

2015-04-04 12:50:41

但唯一不起作用的是過濾器。如果我刪除該行：filter：「url（＃f1）」，一切正常。所以我的問題是：爲什麼過濾器：「url（＃f1）」，不工作？ – amberthx 2015-04-04 18:26:15

因爲如果你指向一個無效的過濾器，該對象不會被繪製。這引起你注意到你已經搞砸了一些事實。 – 2015-04-04 19:59:05

如何添加過濾器才能生效？像我的SVG的.appendChild？ – amberthx 2015-04-05 11:26:42

SVG使用jQuery，高斯過濾器不起作用

回答

相關問題