Question

我正在尝试在javascript中创建一个基于输入参数创建新过滤器的函数。到目前为止，我的代码是：

var svg=document.getElementById("canvas");
var fs=document.getElementById("filters");
var circles=0;
var svgns="http://www.w3.org/2000/svg";
var w=window.innerWidth;

function createfilter(posx,posy,sizex,sizey,type,data){
    var filter=document.createElement("filter");
    filter.setAttribute("id","f"+circles);
    filter.setAttribute("x",posx);
    filter.setAttribute("y",posy);
    filter.setAttribute("width",sizex);
    filter.setAttribute("height",sizey);
    fs.appendChild(filter);
    for(z=0;z<(data.length/2);z++){
        var filter=document.createElementNS(svgns,type[z]);
        filter.setAttributeNS("null","in","SourceGraphic");
        filter.setAttributeNS("null",data[2*z],data[2*z+1]);
        document.getElementById("f"+circles).appendChild(filter);
    }
    console.log(document.getElementById("f"+circles)); //to see if it has worked or not
}

for(i=0;i<10;i++){
    circles+=1;
    createfilter("-50%","-50%","200%","200%",["feGaussianBlur"],["stdDeviation","5"]);
    createcircle((i*w/10),"50%","100","0","hsla("+(i*36)+",100%,50%,0.5)","url(#f"+circles+")"); //this works - the parameters are (posx,posy,radius,stroke,fill,filter) but currently I can only use a filter that I have created in the html svg element as my code doesn't work
}

正如您所看到的，这有效地创建了10个圆圈。我希望能够在未来的某个时刻在动画中移动圆圈，但是现在我想让每个圆圈都有自己的滤镜，我也会制作动画。

目前，控制台输出将过滤器标记显示为

<filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
</filter>

这不是我所希望的，因为标签应该全部为一个（endinf在/＆gt;中），而不是分成2个（奇怪的是这个副本和粘贴使得feGaussianBlur标签出现在大写字母中，但谷歌chrome的控制台显示全部小写，但SourceGraphic正确大写）

有谁知道如何让它发挥作用？

附注：createcircle函数是

function createcircle(posx,posy,radius,stroke,fill,filter){
    var circle=document.createElementNS(svgns,"circle");
    circle.setAttributeNS(null,"id","c"+circles);
    circle.setAttributeNS(null,"cx",posx);
    circle.setAttributeNS(null,"cy",posy);
    circle.setAttributeNS(null,"r",radius);
    circle.setAttributeNS(null,"stroke-width",stroke);
    circle.setAttributeNS(null,"fill",fill);
    //circle.setAttributeNS(null,"filter",filter);
    circle.setAttributeNS(null,"data-posx",posx);
    svg.appendChild(circle);
    console.log(circle);
}

如果重要

Answer 1

需要使用createElementNS创建过滤器，就像其他SVG元素一样。 null命名空间也是null，而不是字符串“null”（或者你可以使用setAttribute并省略第一个参数）。

var svg=document.getElementById("canvas");
var fs=document.getElementById("filters");
var circles=0;
var svgns="http://www.w3.org/2000/svg";
var w=window.innerWidth;

function createfilter(posx,posy,sizex,sizey,type,data){
    var filter=document.createElementNS(svgns,"filter");
    filter.setAttribute("id","f"+circles);
    //filter.setAttribute("x",posx);
    //filter.setAttribute("y",posy);
    //filter.setAttribute("width",sizex);
    //filter.setAttribute("height",sizey);
    fs.appendChild(filter);
    for(z=0;z<(data.length/2);z++){
        var filter=document.createElementNS(svgns,type[z]);
        filter.setAttributeNS(null,"in","SourceGraphic");
        filter.setAttributeNS(null,data[2*z],data[2*z+1]);
        document.getElementById("f"+circles).appendChild(filter);
    }
    //console.log(document.getElementById("f"+circles)); //to see if it has worked or not
}

function createcircle(posx,posy,radius,stroke,fill,filter){
    var circle=document.createElementNS(svgns,"circle");
    circle.setAttributeNS(null,"id","c"+circles);
    circle.setAttributeNS(null,"cx",posx);
    circle.setAttributeNS(null,"cy",posy);
    circle.setAttributeNS(null,"r",radius);
    circle.setAttributeNS(null,"stroke-width",stroke);
    circle.setAttributeNS(null,"fill",fill);
    circle.setAttributeNS(null,"filter",filter);
    circle.setAttributeNS(null,"data-posx",posx);
    svg.appendChild(circle);
//    console.log(circle);
}

for(i=0;i<10;i++){
    circles+=1;
    createcircle((i*w/10),"50%","100","0","hsla("+(i*36)+",100%,50%,0.5)","url(#f"+circles+")");        createfilter("-50%","-50%","200%","200%",["feGaussianBlur"],["stdDeviation","5"]);
//this works - the parameters are (posx,posy,radius,stroke,fill,filter) but currently I can only use a filter that I have created in the html svg element as my code doesn't work
}

html, body, svg {
  width: 100%;
  height: 100%;
}

<svg id="canvas" viewBox="0 0 1000 1000"><defs id="filters">
 </defs></svg>

javascript创建svg过滤器

1 个答案: