javascript - 用图像修改 svg 矩形 ID

Question

我正在制作一个交互式时钟，用户可以点击添加自己的图像，但我已经有点卡住了，即使在尝试了各种事情几个小时后我仍然无法弄清楚所以希望有人可以帮助我或为我指明正确的方向。我也是使用 SVG 的新手。 SVG 代码如下所示:

        <g id="Layer_3">
        <rect id="clickable9" onClick="buttonClick(evt, 9, 54, 360)" x="54" y="360" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable8" onClick="buttonClick(evt, 8, 91.702, 518.706)" x="91.702" y="518.706" transform="matrix(0.866 -0.5 0.5 0.866 -270.127 155.285)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable7" onClick="buttonClick(evt, 7, 203.706, 637.298)" x="203.706" y="637.298" transform="matrix(0.5 -0.866 0.866 0.5 -473.1227 581.123)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable6" onClick="buttonClick(evt, 6, 360, 684)" x="360" y="684" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable5" onClick="buttonClick(evt, 5, 518.706, 646.298)" x="518.706" y="646.298" transform="matrix(-0.5 -0.866 0.866 -0.5 258.2894 1567.7191)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable4" onClick="buttonClick(evt, 4, 637.298, 534.294)" x="637.298" y="534.294" transform="matrix(-0.866 -0.5 0.5 -0.866 1008.1263 1464.7147)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable3" onClick="buttonClick(evt, 3, 684, 378)" x="684" y="378" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>         
        <rect id="clickable2" onClick="buttonClick(evt, 2, 646.298, 219.294)" x="646.298" y="219.294" transform="matrix(-0.866 0.5 -0.5 -0.866 1464.7146 172.1181)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable1" onClick="buttonClick(evt, 1, 534.294, 100.701)" x="534.294" y="100.701" transform="matrix(-0.5 0.866 -0.866 -0.5 1037.7107 -271.7195)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable12" onClick="buttonClick(evt, 12, 378, 54)" x="378" y="54" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable11" onClick="buttonClick(evt, 11, 219.294, 91.702)" x="219.294" y="91.702" transform="matrix(0.5 0.866 -0.866 0.5 275.1223 -167.123)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
        <rect id="clickable10" onClick="buttonClick(evt, 10, 378, 54)" x="100.702" y="203.706" transform="matrix(0.866 0.5 -0.5 0.866 155.2847 -46.1193)" fill="#4BB749" stroke="#000000" stroke-miterlimit="10" width="126" height="126"/>
    </g>

这就是我点击部分的内容:

    function buttonClick(evt, clocknumber, xpos, ypos)
    {
        var x = document.getElementById("uploadedFiles");
        alert('You clicked clock number: ' + clocknumber);
        $('#uploadedFiles').trigger('click');
        var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
        svgimg.setAttributeNS(null,'height','126');
        svgimg.setAttributeNS(null,'width','126');
        svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','test.png');
        svgimg.setAttributeNS(null,'x',xpos);
        svgimg.setAttributeNS(null,'y',ypos);
        svgimg.setAttributeNS(null,'visibility','visible');
        $('svg').append(svgimg);
    }

我设法在上面创建了一个测试 PNG 文件，但我认为这根本不理想。我如何添加/更改 SVG？另外...我该如何使其在 SVG 更改时保持可点击？使用测试 PNG 图像后，它会阻止其可点击。我应该能够自己完成文件上传部分，但在将其更改为上传的图像时遇到问题。

Answer 1

只需添加

svgimg.setAttribute('pointer-events','none');

然后图像将对点击透明，并且其下方的矩形仍会收到点击。