用 Snap.svg 包装 SVG-DOM 元素

Question

Snap.svg 允许通过 CSS 选择器从 SVG-DOM 元素创建快照对象。例如，如何获取 Snap-object myLine 包装 SVG-DOM line 由其 id:

var paper = Snap('#my-svg');
var myLine = paper.select('#my-line');

没关系。

但是如果我们的 SVG-DOM 元素没有任何 ID 怎么办？

如何从具有该元素本身的 SVG-DOM 元素创建 Snap 对象？

// here I use an ID just to get a variable with the pointer to SVG-DOM element
var svg_dom_element = document.getElementById('my-line'); 

var paper = Snap('#my-svg');
var myLine = paper.select(svg_dom_element); // this line of code throws an error

这里第三行代码应该是什么？

解决方法之一是为元素分配一个随机 ID，然后使用 paper.select 获取 Snap 对象。但这并不酷。 :)

Answer 1

您不需要 select 它，'select' 将采用 css select 或者 DOM 元素不需要。

您只需将 DOM 元素传递给 Snap，这样就更简单了:)。

var myLine = Snap(svg_dom_element);

用 Snap.svg 包装 SVG-DOM 元素

Wrap SVG-DOM element with Snap.svg

snap.svg