制作一個 onclick 函數以將 SVG 元素添加到路徑？

Question

大家好，我創建了一個完全交互式的 SVG 圖表，其中包含可單擊的各個路徑，並根據我擁有的與路徑 ID 匹配的 JSON 文件重寫了帶有信息的 div。 目前我正在用 JQuery 編寫此代碼，但我需要有一個函數可以將圓圈添加到單擊的路徑上。 這些圓圈將分別擁有自己的 ID，並使用 JSON 中與該 ID 匹配的對象的信息填充該 div。 我已經嘗試使用 append 方法將 SVG 元素附加到加載到文檔中的 SVG，但看起來這可能不是正確的方法。

這是 SVG 的一部分在單擊之前的樣子

這是點擊后目標的樣子

我嘗試的代碼是添加帶有圓形 SVG 代碼模板文字的 a.append() 以添加到被單擊的路徑。 該函數實際上會追加並添加到 SVG，但不會渲染它。 這是我使用的代碼示例

    function addPath(clickedPath){
    $(clickedPath).append(`
    <circle cx="50" cy="50" r="50" />
    `)
}

function svgLoad(){
    $("#SVG").load("/src/test.svg", function(){
        $("#SVG").css("width", "50vw");
        $("path").on("click", function(evt) {
            addPath($(this));
        })
    }
)}

這甚至可以用 Jquery 實現，還是在 React 之類的東西中會更好？

Answer 1

這是可能的，但也有陷阱。 你可以在這里找到一些很好的解釋。

使用以下行的簡短回答將解決問題：

    function addPath(clickedPath){
$(clickedPath).append(`
<circle cx="50" cy="50" r="50" />
`)
 $("body").html($("body").html());

}

但這可能會導致一些問題。 如果您需要一些快速而骯臟的東西，請接受它，否則我建議您研究一下 React 或 Vue 以獲得更冗長的東西。