一种用于填充不同路径的图案答案

【问题标题】：One pattern used as fill in different paths一种用于填充不同路径的图案
【发布时间】：2014-09-23 19:46:08
【问题描述】：

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

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

【问题讨论】：

您目前如何应用该模式？
您将需要多种模式。
数据集真的很大，每分钟可达 700 个，现在如果我有 10 个模式，fillPattern 函数将以高速率调用，因此 cx 和 cy 将不断变化。因为有 220 条路径，每条路径有 10 种模式，这似乎是非常错误的。
听起来 SVG 对您来说是错误的技术，那么您应该使用画布。

标签： javascript jquery html css svg

【解决方案1】：

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

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

效果很好。

【讨论】：