用图像修改svg rect 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');

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