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

【问题标题】：Is there a way to dynamically create feTurbulence filters?有没有办法动态创建 feTurbulence 过滤器？
【发布时间】：2019-08-20 01:15:26
【问题描述】：

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

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+"")

有谁知道如何解决这个问题或我哪里出错了？任何建议将不胜感激

【问题讨论】：

您必须使用 createElementNS 来创建带有 SVG 命名空间的 SVG 元素。您不能使用只创建 HTML 元素的 createElement。

标签： javascript svg svg-filters

【解决方案1】：

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

const SVG_NS = 'http://www.w3.org/2000/svg';

let testfilter = document.createElementNS(SVG_NS, 'filter');
testfilter.setAttribute("id","filter1");

let turbulence =document.createElementNS(SVG_NS, 'feTurbulence');
turbulence.setAttributeNS(null,"type","fractalNoise");
turbulence.setAttributeNS(null,"baseFrequency",".003");
turbulence.setAttributeNS(null,"numOctaves","5");
turbulence.setAttributeNS(null,"seed","8517");

var dispMap = document.createElementNS(SVG_NS, 'feDisplacementMap');
dispMap.setAttributeNS(null,"in", "SourceGraphic");
dispMap.setAttributeNS(null,"scale", "180");

testfilter.appendChild(turbulence);
testfilter.appendChild(dispMap);
filterHolder.appendChild(testfilter);

#filterHolder{width:0;height:0; position:absolute;left:-10em}
svg{border:1px solid}

<svg id="filterHolder"> 
</svg>


<svg>
  <circle cx="150" cy="75" r="50" filter="url(#filter1)" />
</svg>

【讨论】：