Javascript 将代码从画布转换为svg

我在画布上有一个代码，可以帮助我制作气体三角形（duval三角形）。 我需要将代码从画布转换为svg。 我从画布移动到svg的原因之一是，我不能在画布中添加事件处理程序（类似于位图），但在svg中我可以这样做

1.可能吗

2.我可以在画布中也在svg中做同样的事情吗

3.我是否应该使用库来帮助我编写svg，对特定的svg库有何建议

我的代码基于以下帖子：

$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
// https://www.researchgate.net/publication/4345236_A_Software_Implementation_of_the_Duval_Triangle_Method
var v0={
x:58,，
y:845
};
变量v1={
x:984，
y:845
};
变量v2={
x:521，
y:41
};
变量三角形=[v0，v1，v2]；
//在此处定义所有细分
变量段=[{
要点：[{
x:58,，
y:845
}, {
x:272，
y:845
}, {
x:567，
y:333
}, {
x:461，
y:150
}],
填充：“rgb（17223622）”，
标签：{
正文：“D1”，
cx:300，
cy:645，
withLine:false，
endX:null，
endY:null
},
}, {
要点：[{
x:272，
y:845
}, {
x:567，
y:333
}, {
x:646，
y:468
}, {
x:572，
y:597
}, {
x:716，
y:845
}],
填充：“深蓝”，
标签：{
文本：“D2”，
cx:490，
cy:645，
withLine:false，
endX:null，
endY:null
},
}, {
要点：[{
x:716，
y:845
}, {
x:845，
y:845
}, {
x:683，
y:565
}, {
x:734，
y:476
}, {
x:503，
y:76
}, {
x:461，
y:150
}, {
x:646，
y:468
}, {
x:572，
y:595
}],
填充：“淡青色”，
标签：{
文本：“DT”，
cx:656，
cy:645，
withLine:false，
完:366,，
恩迪：120
},
}，{//在这里-我在地狱里。-s5
要点：[{
x:530，
y:59
}, {
x:512，
y:59
}, {
x:521，
y:41
}],
填充：“黑色”，
标签：{
文本：“PD”，
cx:600，
cy:52，
withLine：是的，
完:520,，
恩迪：70
},
}, {
要点：[{
x:595，
y:235
}, {
x:614，
y:203
}, {
x:530，
y:59
}, {
x:512，
y:59
}, {
x:503，
y:76
}],
填充：“纳瓦霍人”，
标签：{
文本：“T1”，
cx:670，
cy:140，
withLine：是的，
完:574,，
恩迪：105
},
}, {
要点：[{
x:753，
y:446
}, {
x:735，
y:476
}, {
x:595，
y:235
}, {
x:614，
y:203
}],
填充：“棕褐色”，
标签：{
文本：“T2”，
cx:800，
cy:290，
withLine：是的，
完:662,，
恩迪：120
},
}, {
要点：[{
x:845，
y:845
}, {
x:683，
y:565
}, {
x:753，
y:446
}, {
x:984，
y:845
}],
填写：'秘鲁'，
标签：{
正文：“T3”，
cx:800，
cy:645，
withLine:false，
endX:null，
endY:null
},
}, ];
//标签样式
var labelfontsize=12；
var labelfontface='verdana'；
var-labelpadding=3；
//预先创建箭头的画布图像
var箭头头长=10；
var arrowheadWidth=8；
var arrowhead=document.createElement（'canvas'）；
箭头（）；
var legendTexts=['PD=局部放电'，
‘DT=放电和热’，
“T1=热故障T<300℃”，
“T2=热故障300℃700℃”，
‘D1=低能放电’，
“D2=高能放电”
];
//开始绘图
/////////////////////
//在三角形内绘制彩色线段
对于（变量i=0；i<canvas id="canvas" width=1024 height=1020></canvas>
<button id="canvas2svg">Canvas 2 SVG</button>

var canvas = new fabric.Canvas('canvas', { isDrawingMode: true });
  //var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
$("#canvas2svg").click(function(){
    canvas.isDrawingMode = false;
    alert(canvas.toSVG());
});