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

Is it possible to create a snap element without creating a svg object? [snap.svg]

本文关键字:创建 svg 元素 snap 是否 对象 情况下      更新时间:2023-09-26

我想准备一些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的抽象快照元素,如下所示:

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

如果将一个元素传递给初始捕捉函数,它将把新的捕捉对象附加到该元素

这样你就可以。。。

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