Question

我在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);
        }
    }

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

Answer 1

所以我的工作方式是在javascript中创建模式并将其附加到defs标记，为其提供id。

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

工作得非常好。

一种模式用作不同路径中的填充

1 个答案: