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，高斯过滤器不起作用

回答

相关问题