SVG使用jQuery，高斯滤波器不起作用

SVG using jQuery, gaussian filter does not work

本文关键字：滤波器 不起作用 高斯 使用 jQuery SVG      更新时间：2023-09-26

我有一个问题：我使用jQuery使用requirejs来绘制圆。我添加了gaussianblur过滤器用于绘图。但在这之后，就看不到任何圆圈了。这是我代码中有趣的部分：

   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);
}
});

})；

在我的圈子里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
  });

我认为它应该这样工作。如果我删除"filter:"url（#f1）这行，圆圈是可见的，一切都很好（但我想要这个过滤器）。你能认出我犯的错误吗？提前感谢

你有没有停下来想知道为什么你的一些代码使用：

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

而不是这个？

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

使用jQuery创建这样的元素是行不通的。jQuery被设计为仅在HTML上操作，并在默认（即HTML）命名空间中创建元素。而SVG元素必须在SVG命名空间中。*

您需要对创建的任何SVG元素使用createElementNS()方法。

*至少在SVG2出现之前

相关文章：