svg中text标签换行显示,并实现拖拽移动text标签

如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割,

例如 图片中 的文本 

嘻嘻嘻\n哈哈哈\n啦啦啦\n么么么\n哒哒哒

然后对文本用split("\n")方法进行切割,变成数组['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒']

//x 和 y 是做鼠标移动时回传出来的,因为text便签无法换行,所以要换行必须使用tspan标签,

即在text标签中插入tspan便签,x和y分别是控制tspan的x轴和y轴,是相对于svg的,而不是针对于父级text的,

let arr = ['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒']

let str

arr.map((item, index) => {

     let k = `<tspan x="${x}" y="${y + 20 * (index + 1)}">${item}</tspan >`;

     str += k;

});

因为不止有批注还有勾叉,涂鸦等,所以后台给了我一个text字段可以自己存东西,如下图是存text的

 这个存的是涂鸦的

 移动的话也是需要取出存储的上一次的自段,然后动态去根据x,y的回传值对point的各个坐标进行加减计算,逻辑其实并不复杂,关键储存的东西想清楚,就是业务代码的工作量了,

如果要移动的话,其实还需要给每个标签外加一个rect标签,鼠标移入时让rect 显示,移出时关闭,给予颜色,便于操作,而且如果没有这个rect标签,当你直接拖拽text标签时,他会是一个直接选中文字的效果,而不是拖动