如何使用Javascript单击div上的svg元素？

我有一个svg矩形。单击div后，我需要单击svg矩形。 这里我附上了代码

<div id="demo" class="demo">click here</div>
<p id="demo1"></p>  
<svg width="50" height="50" id="svgid">
  <rect width="50" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

点击这里

脚本代码是

<script>
document.getElementById("demo").addEventListener("click", function()
{
  document.getElementById("demo1").innerHTML = "Hello World";
    $('#svgid').click(function()
    {
       alert("clicked");

    });
});
</script>

document.getElementById（“演示”）.addEventListener（“单击”，函数）（）
{
document.getElementById（“demo1”）.innerHTML=“Hello World”；
$（'#svgid'）。单击（函数（）
{
警报（“点击”）；
});
});

---

这里是Hello World在单击demo div时显示的内容

您的意思是这样的，因此当您单击文本时，警报将运行

我将警报移到处理程序之外，否则第一次单击文本时会收到一个警报，第二次单击文本时会收到两个警报，依此类推

$（'#svgid'）。单击（函数（）
{
警报（“点击”）；
});
document.getElementById（“演示”）.addEventListener（“单击”，函数）（）
{
document.getElementById（“svgid”）.dispatchEvent（新事件（“单击”））；
});

点击这里

有两种实现方法，首先，可以将
onclick=“clicked（）”
添加到html元素中，然后在javascript中只需定义函数即可

<script>
  function clicked_stv(){
    alert('it happened');
  };
</script>


点击这里

当我单击“单击此处”文本时，什么也没有发生。问题是：“单击div后，我需要单击svg rect”