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

添加

{{1}}

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

使用image修改svg rect ID

1 个答案: