CODEWITHSUNDEEP
javascriptsvgsnap.svg
Marcin Król
Marcin Król

Reputation: 1664

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

I want to prepare some snap elements and later attach them to some svg. Snap() docs say that Snap() can only wrap an existing svg object or create a new one. I cannot find a method to create Snap instance without actually creating a svg object.

I can do like the following:

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

It works but it is ugly. Is there any better way to achieve this?

More precisely, I would like some way to create abstract snap elements with no dependency on DOM, something like the following:

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

Upvotes: 2

Views: 1529

Answers (1)

maioman
maioman

Reputation: 18764

if you pass an element to the initial snap function it will attach the new snap object to that element,

so you could ...

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

Upvotes: 2

Related Questions