Svg animateMotion dynamically added via js is invalid

if you do not load js directly, it is normal to write directly in html. How should it be solved?

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
    </head>

    <body>
        <div id="map" style="width: 1024px;height:930px;margin: auto;overflow: hidden;">
    <svg xmlns="https://img.codeshelper.com/upload/img/2021/08/12/vrqu4e5a444859.gif"></image>
                <animateMotion xlink:href="-sharpcop" class="animate" rotate="auto-reverse" dur="8s" fill="freeze">
                    <mpath xlink:href="-sharpmotionPath-1179-1"></mpath>
                </animateMotion> -->
    </svg>
        </div>
    </body>
    <script>
    var drawAnimate = function() {
        var svg = $("svg");

        var g = document.createElementNS("http://www.w3.org/2000/svg", "g");

        var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        path.setAttribute("fill", "none");
        path.setAttribute("data-uid", "motionPath-1179-1");
        path.setAttribute("id", "motionPath-1179-1");
        path.setAttribute("stroke", "red");
        path.setAttribute("d", "M" + "940,190Q880,230 870,220Q860,230 850,230Q840,230 830,230Q820,230 810,220Q810,210 830,230Q810,200 810,190");
        path.setAttribute("stroke-width", 3);
        $(g).append(path);

        var image = document.createElementNS("https://img.codeshelper.com/upload/img/2021/08/12/fyoonphxpbn860.gif"; 
        $(g).append(image);

        var animate = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
        animate.setAttribute("xlink:href", "-sharpcop");
        animate.setAttribute("class", "animate");
        animate.setAttribute("repeatCount","indefinite");
        animate.setAttribute("rotate", "auto-reverse");
        animate.setAttribute("dur", "8s");
        // animate.setAttribute("begin", "click");
        animate.setAttribute("fill", "freeze");

        var mpath = document.createElementNS("http://www.w3.org/2000/svg", "mpath");
        mpath.setAttribute("xlink:href", "-sharpmotionPath-1179-1");

        $(animate).append(mpath);
        $(g).append(animate);
        svg.append(g);
        return g;
    }
    drawAnimate();
    </script>
Aug.12,2021

if the problem has not been solved, I also have the same question, hr class=


After looking for it for a long time, I was so happy to see this problem. As a result, it was not solved when it came in. I don't know whether the landlord has solved it or not, and there is no response. Let me share my solution. In fact, it can be added dynamically, but the problem lies in xlink:href , which is not linked to the corresponding element. The reason is that this xlink:href needs to specify a namespace. So deal with it as follows:

var animate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
animate.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "-sharpcircle_" + this.id);
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bed9f6-313d8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bed9f6-313d8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?