使用现有SVG标签初始化svg.js时doc未定义，如何获取Doc绘制折线？

嘿，你遇到的问题其实是对svg.js的API用法有点误解啦，咱们一步步理清楚：

问题根源 #

你用SVG.get('mysvg')获取到的对象，本身就是对应现有SVG元素的可操作实例，它已经具备绘制图形的所有方法，根本不需要再调用doc()——doc()是用来创建新的SVG文档时才会用到的方法，所以你调用svg.doc()自然会报错“doc属性未定义”。

正确代码示例 #

假设你的页面上已经有这样的SVG元素：

<svg id="mysvg" width="200" height="200"></svg>

那正确的绘制折线代码应该是这样的：

// 获取已存在的SVG元素对应的实例
var svg = SVG.get('mysvg');
// 直接用这个实例调用polyline方法绘制折线
svg.polyline([[10, 10], [50, 80], [150, 30], [190, 100]])
  .fill('none') // 填充设为无
  .stroke({ width: 2, color: '#2c3e50' }); // 设置线条样式

补充：什么时候用doc() #

如果是要创建新的SVG文档（而不是操作已有的），才会用到doc()，示例代码如下：

// 创建新的SVG文档并添加到页面body中
var draw = SVG().doc().addTo('body').size(300, 300);
// 在新文档上绘制折线
draw.polyline([[20,20], [100,150], [250,80]])
  .fill('none')
  .stroke({ width: 3, color: '#e74c3c' });

这样调整之后，你就能顺利绘制折线啦～

内容的提问来源于stack exchange，提问作者Jason