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

Question

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

我可以这样做:

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

如果您将一个元素传递给初始 snap 函数，它会将新的 snap 对象附加到该元素，

所以你可以...

//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