0

How can I wrap existing <svg> element in svg.js?

For example:

<svg>
    <circle r="10" cx="10" cy="10" fill="red"></circle>
</svg>

I know this can be built with svg.js very easy, but I take it as example for my question.

var existingSvg = Svg.<some-method>(document.querySelector("svg"));
existingSvg.children(); // circle

How can I do this?

I tried using SVG('<id-ofsvg-element>'), but children() returns an empty array.

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474

2 Answers2

2

There is a plugin called svg.absorb.js which lets you import existing SVGs. To use it, execute 

draw.absorb(element)
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
2

Old question with a new answer: In v2 svg.js can pickup other instances of svg by simply calling SVG.get('id') which then will return the instance for this svg

// EDIT: to make sure, that all methods work properly you should call SVG.prepare(element) when you dont have another SVG in your document already. I think thats a bug which should be fixed

// EDIT2: It should even be possible to use SVG('id') to get the root instance already. This would make the call to SVG.prepare() obsolete, too

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60