我在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);
}
}
现在,由于某种原因,我记录的所有模式都与上次创建的模式具有相同的值。在某个地方,它仍然绑定到同一个变量。
所以我让它工作的方法是用javascript创建模式,并将其附加到defs标记中,给它一个id。
因此,它首先检查id是否已经存在,如果没有,则创建模式,将其附加到defs并使用它。
工作得很好。