当通过JavaScript（Django、Python）创建时，圆圈不会显示在网页中

我在Django webapp中创建了一个页面，显示一个图像，允许用户单击该图像，并应在用户单击的图像顶部放置一个圆圈。 下面的代码能够获取鼠标单击图像的位置，并在正确的位置向html添加标记，但它实际上不会显示在页面上。如果我在html中硬编码一个圆圈，它就会显示得很好。看起来鼠标与SVG元素位于不同的坐标系上。。。我尝试了event.x、event.pageX和event.clientX，但没有发现任何区别。即使我硬编码圆的位置，它也不会显示在单击上

html:

---

感谢@enxaneta在评论中建议CreateElements，感谢（也感谢@enxaneta）帮助翻译坐标，我让代码开始工作

this.window.addEventListener('DOMContentLoaded', (event) => {
    const svgElem = this.document.getElementsByTagName("svg")

    if (svgElem != undefined && svgElem.length != 0) {
        const svg = svgElem[0]
        const image = svg.firstChild
        svg.onclick = function(event) {
            
            var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
            let m = mousePositionSVG(event)
            newCircle.setAttribute('cx', m.x)
            newCircle.setAttribute('cy', m.y)
            newCircle.setAttribute('r', '50')
            newCircle.setAttribute('fill', 'red')
            svg.append(newCircle)
        }
    }
});

function mousePositionSVG(e) {
    let svg = document.querySelector('svg')
    var p = svg.createSVGPoint()
    p.x = e.clientX
    p.y = e.clientY
    var ctm = svg.getScreenCTM().inverse();
    var p =  p.matrixTransform(ctm);
    return p;
}

---

感谢@enxaneta在评论中建议CreateElements，感谢（也感谢@enxaneta）帮助翻译坐标，我让代码开始工作

this.window.addEventListener('DOMContentLoaded', (event) => {
    const svgElem = this.document.getElementsByTagName("svg")

    if (svgElem != undefined && svgElem.length != 0) {
        const svg = svgElem[0]
        const image = svg.firstChild
        svg.onclick = function(event) {
            
            var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
            let m = mousePositionSVG(event)
            newCircle.setAttribute('cx', m.x)
            newCircle.setAttribute('cy', m.y)
            newCircle.setAttribute('r', '50')
            newCircle.setAttribute('fill', 'red')
            svg.append(newCircle)
        }
    }
});

function mousePositionSVG(e) {
    let svg = document.querySelector('svg')
    var p = svg.createSVGPoint()
    p.x = e.clientX
    p.y = e.clientY
    var ctm = svg.getScreenCTM().inverse();
    var p =  p.matrixTransform(ctm);
    return p;
}

---

当需要创建新的svg元素时，请使用createElement@enxaneta非常感谢。这些圆现在可以正确渲染，但仍然不在鼠标单击的位置。为了检测鼠标在svg元素上的位置，请尝试以下操作：当需要创建新的svg元素时，请使用createElement@enxaneta非常感谢。这些圆现在可以正确渲染，但仍然不在鼠标单击的位置。为了检测svg元素上的鼠标位置，请尝试以下操作：

this.window.addEventListener('DOMContentLoaded', (event) => {
    const svgElem = this.document.getElementsByTagName("svg")

    if (svgElem != undefined && svgElem.length != 0) {
        const svg = svgElem[0]
        const image = svg.firstChild
        svg.onclick = function(event) {
            
            var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
            let m = mousePositionSVG(event)
            newCircle.setAttribute('cx', m.x)
            newCircle.setAttribute('cy', m.y)
            newCircle.setAttribute('r', '50')
            newCircle.setAttribute('fill', 'red')
            svg.append(newCircle)
        }
    }
});

function mousePositionSVG(e) {
    let svg = document.querySelector('svg')
    var p = svg.createSVGPoint()
    p.x = e.clientX
    p.y = e.clientY
    var ctm = svg.getScreenCTM().inverse();
    var p =  p.matrixTransform(ctm);
    return p;
}