如何从jointjs创建电路

如何解决如何从jointjs创建电路

我正在开发一个应用程序，该应用程序允许您使用电子元件创建电路。我使用新的 Joint.shapes.devs.Model 从 SVG 图像创建元素。我尝试在其上添加 html 以便能够为我的组件动态赋值，但没有成功。如果有人能帮助我，这将挽救我的生命。 谢谢。

var svgG = [
    '<?xml version="1.0" encoding="UTF-8"?>','<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">','<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="61px" height="61px" viewBox="-0.5 -0.5 61 61" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2021-04-27T15:15:37.548Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/90.0.4430.85 Safari/537.36&quot; etag=&quot;6S3lbPQObtj0IdKloeT2&quot; version=&quot;14.6.6&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;7e0a89b8-554c-2b80-1dc8-d5c74ca68de4&quot;&gt;jZPfT4NADMf/Gh5d+OF0Pjqc+qDGOBN1L+YGHZwelBzHxvzr7XFlDI2JBDb6aa+9K996UVy0N1pU+T2moLzQT1svuvLCcHY2o18L9g6chlMHMi1Th4IBLOUXMPSZNjKFehRoEJWR1RgmWJaQmBETWuNuHLZBNa5aiQx+gWUi1G/6IlOTMw18f3DcgsxyLj2bsmMtks9MY1NyPS+MNt3l3IXoc3F8nYsUd0coWnhRrBGNeyvaGJRtbd82t+76D+9h3xpK858F6s4kr/c7/GiuLqqn4mH19rE6OXdZtkI10B+j26zZ9w2qUJYG9GJLdWyvAy+ab0EbST28E2tQj1hLI7Ek3xqNwYICDof1yUhFnUPKhlAys6EJ2KwEclOoH2kvOcZg5XJVdi9Fm1kFTkCRDrSNm9QUJ9R7jY1OoJ64f1ukrpxWNrK1lefdITqlTOd0+xMSAEx3z5QOGrmlrMW8Z84OxmwcR3c0B7XsdvK873YqEmLcWToStH9+suAgBJovwAKM3lMILzjth4RnK7hgezco9YxRfqTRngmejeyQedAHvbBEenOQYuc7Gvdo8Q0=&lt;/diagram&gt;&lt;/mxfile&gt;">',"<defs />","<g>",'<ellipse cx="30" cy="30" rx="30" ry="30" fill="#ffffff" stroke="#000000" pointer-events="all" />','<path d="M 18 30 Q 20.4 21 24 21 Q 27.6 21 30 30 Q 31.8 39 36 39 Q 39.6 39 42 30" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all" />',"</g>","</svg>",].join("");


var g = new joint.shapes.devs.Model({
    markup:
      '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',size: {
      width: 70,height: 70,},position: {
      x: 120,y: 10,attrs: {
      ".body": {
        width: 1024,height: 768,"xlink:href": "data:image/svg+xml;utf8," + encodeURIComponent(svgG),preserveAspectRatio: "none",".label": {
        text: "",outPorts: ["S"],valeur: 50,});