0

I use svg.js to create an SVG image within a HTML document. However, I want to add a few elements that are not created by svg.js, but rather some other code. I know that there is the .svg() method that takes SVG source and adds it, but I have the actual DOM element, which is already part of the SVG. Is there a way to get an svg.js object for this DOM element?

burnpanck
  • 1,955
  • 1
  • 12
  • 36

1 Answers1

3

What you are searching for is the SVG.adopt() method which takes a node and returns an SVG.js object.

You can also use the SVG.select() method which takes a css selector and returns a set of SVG.js elements. Because it's a set (sort of array) you need to get the first element with SVG.select(something).get(0)

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
  • I could not find `SVG.adopt()` in `2.3.2`. The docs mention an extension by the name [`absorb`](https://github.com/svgdotjs/svg.absorb.js) , but that one in turn says it's now included in `svg.js`. `SVG.select()` worked. Thanks! – burnpanck Nov 30 '16 at 11:08
  • 1
    `SVG.adopt` is included since `2.0.0` while `absorb` is deprecated (only useful for svg.js v1.x.x). `adopt` is not mentioned in the docs because the usual way to get elements is with `SVG.select`. However: Especially for use cases when you have a node it fits perfectly – Fuzzyma Nov 30 '16 at 11:29