Question

我想准备一些捕捉元素，然后将它们附加到某个svg。 Snap()文档说Snap（）只能包装现有的svg对象或创建一个新对象。我找不到创建Snap实例的方法而不实际创建svg对象。

我可以这样做：

var s = Snap();
s.remove();
var element = s.circle(1,2,3);
new Snap("#desired").add(element);

它有效，但很难看。有没有更好的方法来实现这个目标？

更确切地说，我想要一些方法来创建不依赖于DOM的抽象snap元素，如下所示：

var element = Snap.circle(1,2,3); // create some abstract independent element
...
var paper = new Snap("#some_svg");
paper.add(element);

Answer 1

如果将元素传递给初始捕捉函数，它会将新的捕捉对象附加到该元素

所以你可以......

//create  a specific element for the job
var g = document.createElementNS('http://www.w3.org/2000/svg','g');
//create a snapsvg, attach it to g
var s = Snap(g);
// do your snappy stuff
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});
var svg = document.querySelector('svg');
svg.style.background= 'red'

//whenever you're ready attach it dom
setTimeout( () => {svg.appendChild(g)}, 2500)

pen

是否可以在不创建svg对象的情况下创建snap元素？ [snap.svg]

1 个答案: