将 "circle" 添加到可点击的 javascript 函数

Question

我有 js 允许受访者点击特定 shape/image 并使其可点击。目前我已将其设置为允许矩形和多边形，但我想添加 "circle" 作为形状，但我不确定如何执行此操作。我的代码在这里。 "circle" 代码不起作用。我尝试重用 poly 脚本，但没有成功。有点新，所以任何帮助将不胜感激！

function addClickable(shape, coords) {
    area.push('<area class="area" href="#0" shape="' + shape + '" coords="' + coords.join(",") + '" style="outline: none;" title="" />');
    if (shape.toLowerCase() == "rect") {
        highlight.push('<rect x="' + coords[0] + '" y="' + coords[1] + '" width="' + (coords[2] - coords[0]) + '" height="' + (coords[3] - coords[1]) + '" style="fill-opacity:0.7; fill: none;" class="highlight" />');
    }
    if (shape.toLowerCase() == "poly") {
        var newCoords = coords.join(" ").replace(/(\d+)\s(\d+)\s/g, ',   ');
        highlight.push('<polygon  points="' + newCoords + '" style="opacity: 0.7; fill: none;" class="highlight" />');
    }
    if (shape.toLowerCase() == "circle") {
        var newCoords = coords.join(" ").replace(/(\d+)\s(\d+)\s/g, ',   ');
        highlight.push('<circle  points="' + newCoords + '" style="opacity: 0.7; fill: none;" class="highlight" />');
    }
}

Answer 1

SVG 的 <circle> 没有点属性。

<circle> 的语法是：

<circle cx="50" cy="50" r="50" />

此外，cx 和 cy 代表圆的中心点。

将 "circle" 添加到可点击的 javascript 函数

Adding "circle" to clickable javascript function

javascript

shapes

coordinates