javascript - 一种图案用作不同路径的填充

Question

我在 svg 中有以下模式

<pattern id="1" x="0" y="0" width="1" height="1">
    <circle cx="90" cy="90" r="10" fill="blue"/>
</pattern>

现在我想要完成的是使用这个模式作为不同路径内的填充，每个路径设置一些属性然后应用它。

当我当前运行它时，应用模式的每个路径都会更改为新设置的属性。

有没有办法让这个属性更改只适用于当前路径，而保留旧路径。有点像克隆？

附言。我曾尝试在 javascript 中创建模式，然后将其附加到 defs 元素，但这似乎不起作用。

目前正在尝试这样做

var data = ['a','b','c'];

    function set() {
        if(data.length > 0) {
            var counter = 0;
            var el = $('#' + data.splice(0, 1));
            var x = el[0].getBBox().width / 2;
            var y = el[0].getBBox().height / 2;

            var pattern = $('#1');
            pattern.attr('cx', x);
            pattern.attr('cy', y);

            setTimeout(set, 1000);
        }
    }

    function fillPath(el, pattern, counter) {
        if(counter < 11) {
            counter++;
            pattern.attr('r', pattern.attr('r') + 10);
            el.attr('fill', 'url(#1)');
            setTimeout(fillPath(el, pattern, counter), 50);
        } else {
            el.attr('fill', 'blue');
        }
    }

我理解为什么它会发生变化，因为它只有一个实例。有没有办法制作一个副本来使用它并在完成后丢弃它？

编辑

尝试了不同的方法

    function set() {
        var pattern = document.createElementNS('http;//www.w3.org/2000/svg', 'pattern');
        pattern.setAttribute("x","0");
        pattern.setAttribute("y","0");
        pattern.setAttribute("width","1");
        pattern.setAttribute("height","0");

        var circle = document.createElementNS('http;//www.w3.org/2000/svg', 'circle');
        circle.setAttribute("cx","90");
        circle.setAttribute("cy","90");
        circle.setAttribute("r","10");
        circle.setAttribute("fill","blue");

        pattern.appendChild(circle);
        if(data.length > 0) {
            var counter = 0;
            console.log("is");
            var el = $('#' + data.splice(0, 1));

            var x = el[0].getBBox().width / 2;
            var y = el[0].getBBox().height / 2;

            fillPath(el, pattern, counter);

            setTimeout(set, 1000);
        }
    }

    function fillPath(el, pattern, counter) {
        if(counter < 11) {
            counter++;
            pattern.firstChild.attr('r', pattern.firstChild.attr('r') + 10);
            console.log(pattern);
            el.attr('fill', pattern);
            setTimeout(fillPath(el, pattern, counter), 50);
        }
    }

现在由于某种原因，我记录的所有模式都与最后创建的模式具有相同的值。 在某处它仍然绑定(bind)到同一个变量。

Answer 1

所以我让它工作的方法是在 javascript 中创建模式并将它附加到 defs 标签，给它一个 id。

然后它首先检查 id 是否已经存在，如果不存在则创建模式将其附加到 defs 并使用它。

工作得很好。