javascript生成的代码不'；行不通

我有点结巴

我有一个代码，如果我把它粘贴在打开的F12窗口中，它会工作得很好，所以它是好的

这段svg代码的想法是，我不能准确地将鼠标悬停在

路径上，而是在附近的某个地方，以便它改变颜色

但我需要使用javascipt生成完全相同的代码，我编写了两个类，使用了它们，它们现在生成的代码与codepen链接中的代码相同，我可以在F12开发窗口中看到，但它不起作用

我的javascript代码：

class Polyline {

    // https://codepen.io/francoisromain/pen/dzoZZj
    
    constructor(points, smoothing, fill, color) {
        this.points = points;
        this.smoothing = (smoothing === undefined) ? 0.2 : smoothing;
        this.fill = fill;
        this.color = color;
    }

    line (pointA, pointB) {
        const lengthX = pointB[0] - pointA[0];
        const lengthY = pointB[1] - pointA[1];
        return {
            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
            angle: Math.atan2(lengthY, lengthX)
        }
    }

    controlPoint (current, previous, next, reverse) {
        const p = previous || current;
        const n = next || current;
        const o = this.line(p, n);
        const angle = o.angle + (reverse ? Math.PI : 0);
        const length = o.length * this.smoothing;
      
        const x = current[0] + Math.cos(angle) * length;
        const y = current[1] + Math.sin(angle) * length;
        return [x, y];
    }

    bezierCommand(point, i, a) {
        const cps = this.controlPoint(a[i - 1], a[i - 2], point);
        const cpe = this.controlPoint(point, a[i - 1], a[i + 1], true);
        return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
    }

    svgPath(points, svg) {
        const d = points.reduce((acc, point, i, a) => i === 0
          ? `M ${point[0]},${point[1]}`
          : `${acc} ${this.bezierCommand(point, i, a)}`
        , '');
        
        const defs = document.createElement( 'defs' );
        defs.innerHTML = "<path id='poly-1' d='" + d + "' fill=" + this.fill + "></path>";

        svg.appendChild(defs);

        const g = document.createElement( 'g' );
        g.setAttribute("id", "group");
        svg.appendChild(g);

        const use1 = document.createElement( 'use' );
        use1.setAttribute("xlink:href", "#poly-1");
        use1.setAttribute("stroke-width", "15");
        use1.setAttribute("pointer-events", "stroke");
        g.appendChild(use1);

        const use2 = document.createElement( 'use' );
        use2.setAttribute("class", "use");
        use2.setAttribute("xlink:href", "#poly-1");
        g.appendChild(use2);

    }

    draw() {
        const svg = document.getElementById("chart-main-canvas");
        this.svgPath(this.points, svg);
    }

}


class Canvas {
    
    constructor(w, h, color) {
        this.width = w;
        this.height = h;
        this.color = color;
        // this.scale = 1;
    }

    canvas() {
        return `<svg width="${this.width}" height="${this.height}" id="chart-main-canvas"  style="background-color: ${this.color}; z-index:5000;" ></svg>`;
    }

    draw() {
        const c = document.getElementById("lifespan-chart-content");
        c.innerHTML = this.canvas();
    }

}


window.addEventListener('load', function() {
    c1 = new Canvas(1000, 500, "bisque");
    c1.draw();

    var smoothing = 0.2;
    var fill = "green";
    var color = "red";

    const points = [
        [5, 10],
        [100, 400],
        [200, 400],
        [355, 50],
        [500, 500]
    ]

    p1 = new Polyline(points, smoothing, fill, color);
    p1.draw();

});

仍然不起作用
您也可以使用此技术来绘制SVG，因为仅仅
innerHTML
它们并不是那么简单


//您的SVG代码（如您所愿）
常量svgFromJS=`
`;
//创建一个tmp容器
const c=document.createElement（'div'）；
//将SVG添加到tmp容器
c、 innerHTML=''+svgFromJS；
//将tmp容器中SVG的子对象移动到主体处的目标SVG
Array.prototype.slice.call（c.childNodes[0].childNodes.forEach（函数（el）{
document.getElementById（'swgtodraw'）.appendChild（el）；
});
#组。使用{
笔画：红色
} 
#组：悬停。使用{
笔画：绿色；
}
请阅读关于@enxaneta的文章，我已经阅读了这篇文章。更改了
vbox上的
div
和
createElement上的
createElement
（“127.0.0.1:5500”，…）
，但没有任何更改try
文档。createelements（“http://www.w3.org/2000/svg“，‘随便什么’
@enxaneta现在我有了
const defs=document.createElements（“http://www.w3.org/2000/svg“，‘defs’”，什么也没变。我可能需要以某种方式刷新包含这些内容的块？因为如果我用ctrl+c ctrl+v编写相同的代码，那么除了要创建的DEF之外，它还可以工作，还可以创建svg元素、路径、第2组使用元素……非常感谢。但是为什么仅仅使用innerHTML就没有那么简单呢？对此有什么解释吗？一般来说，
innerHTML
property支持简单的DOM操作，但要做更复杂的事情，最好使用DOM方法：
    svgPath(points, svg) {
        const d = points.reduce((acc, point, i, a) => i === 0
        ? `M ${point[0]},${point[1]}`
        : `${acc} ${this.bezierCommand(point, i, a)}`
        , '');

        const defs = document.createElementNS("http://www.w3.org/2000/svg", 'defs' );
        defs.innerHTML = "<path id='poly-1' d='" + d + "' fill=" + this.fill + "></path>";

        svg.appendChild(defs);

        const g = document.createElementNS("http://www.w3.org/2000/svg", 'g' );
        g.setAttribute("id", "group");
        svg.appendChild(g);

        const use1 = document.createElementNS("http://www.w3.org/2000/svg",'use' );
        use1.setAttribute("xlink:href", "#poly-1");
        use1.setAttribute("stroke-width", "15");
        use1.setAttribute("pointer-events", "stroke");
        g.appendChild(use1);

        const use2 = document.createElementNS("http://www.w3.org/2000/svg", 'use' );
        use2.setAttribute("class", "use");
        use2.setAttribute("xlink:href", "#poly-1");
        g.appendChild(use2);

    }