使用 svg.js 库包装现有的 SVG 元素

Question

如何将现有的 <svg> 元素包装在 svg.js 中？

例如：

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

我知道这可以很容易地用 svg.js 构建，但我以它为例来回答我的问题。

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

我该怎么做？

我尝试使用 SVG('<id-ofsvg-element>')，但 children() returns 是一个空数组。

Answer 1

有一个 plugin called svg.absorb.js 可以让您导入现有的 SVG。要使用它，请执行

draw.absorb(element)

Answer 2

老问题新答案：在 v2 中，svg.js 可以通过简单地调用 SVG.get('id') 来获取 svg 的其他实例，然后 return 这个 svg

的实例

// 编辑：为确保所有方法都能正常工作，当您的文档中还没有其他 SVG 时，您应该调用 SVG.prepare(element)。我认为这是一个应该修复的错误

// EDIT2：甚至应该可以使用 SVG('id') 来获取根实例。这也会使对 SVG.prepare() 的调用过时

Wrap existing SVG elements using the svg.js library