svg.js 3.1.1调用draw.line绘制线条无显示无报错问题求助

问题根因 #

svg.js 3.x版本默认stroke颜色为none（透明）。你之前绘制的矩形、圆形、椭圆类图形默认带黑色填充属性，所以无需额外配置即可显示；但线条元素没有填充区域，仅依赖描边渲染，未指定描边颜色时就会处于透明不可见状态，且该代码生成的是合法SVG结构，因此浏览器不会抛出报错。

修复方案 #

仅需在stroke配置中追加颜色属性即可，两种常用写法如下：

• 直接在stroke配置项内指定颜色

const demo = document.getElementById('demo');
let draw = SVG().addTo('#demo').size('100%', '100%');
// 新增color属性，可替换为任意合法颜色值
let line = draw.line(0, 0, 100, 150).stroke({ width: 1, color: '#000' });

• 链式调用单独设置描边颜色

let line = draw.line(0, 0, 100, 150).stroke({ width: 1 }).stroke('#000');

扩展说明 #

如果需要实现特殊描边效果，可在stroke配置中追加对应参数，比如绘制虚线的示例：

// 绘制1px宽的黑色虚线，实线段长5px，间隔5px
let line = draw.line(0, 0, 100, 150).stroke({ width: 1, color: '#000', dasharray: '5,5' });

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