在不同的路径中用作填充的一种图案

我在svg 中有以下模式

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

现在，我试图实现的是使用这个模式作为不同路径中的填充，每个路径都设置一些属性，然后应用它

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

是否有一种方法可以使此属性更改仅适用于保留旧路径的当前路径。有点像克隆？

ps。我尝试过用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);
        }
    }

现在，由于某种原因，我记录的所有模式都与上次创建的模式具有相同的值。在某个地方，它仍然绑定到同一个变量。