Question

我正在尝试创建一个对象数组，每个对象都有自己的具有独特属性的独特的feTurbulence滤镜。我正在生成过滤器，然后将它们附加到现有的SVG元素。我遇到的问题是，当我尝试动态创建过滤器时，标记将呈现为动荡而不是feTurbulbulence。到目前为止，这是我尝试过的：

var testfilter = document.createElement('filter');
var turbulence = document.createElement("feTurbulence")
var dispMap = document.createElement('feDisplacementMap')
var filterHolder = document.getElementById("filterHolder")
testfilter.setAttribute("id", "filter1");
turbulence.setAttribute("type","fractalNoise");
turbulence.setAttribute("baseFrequency",".003");
turbulence.setAttribute("numOctaves","5");
turbulence.setAttribute("seed","8517");
testfilter.appendChild(turbulence);
dispMap.setAttribute("in", "SourceGraphic");
dispMap.setAttribute("scale", "180");
testfilter.appendChild(dispMap);
filterHolder.appendChild(testfilter);

我已经尝试过像下面这样通过feTurbulence传递变量，但它仍然呈现为所有小写字母

var turbString = "feTurbulence";
var turbStringCap = turbString.substring(0,2) + turbString.charAt(2).toUpperCase() + turbString.slice(3);
var turbulence = document.createElement(""+turbStringCap+"")

有人知道如何解决这个问题或我要去哪里错吗？任何建议将不胜感激

Answer 1

我已经重写了您的代码，现在可以正常工作了。我希望这就是你的要求。

Printing car details:
Car colour: Black, tank capacity: 50
Colour: Black
Tank capacity: 50
myApp.Car@5d47c63f
2.4.12

Printing car details
[Pipeline] echo
Car colour: null, tank capacity: 0
[Pipeline] echo
Colour: null
[Pipeline] echo 
Tank capacity: 0
[Pipeline] echo
org.mojcik.Car@504bcec3
[Pipeline] echo
2.4.12

Car car = new Car().with {
    it.colour = arg_colour
    it.tankCapacity = arg_tankCapacity
    return it
}

有没有办法动态创建feTurbulence过滤器？

1 个答案: