Как щелкнуть элемент SVG по элементу div, используя Javascript?

Question

У меня есть svg Rect.Onclick of div Мне нужно нажать на svg rect.Здесь я прикрепил код

<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>

Здесь Hello World отображается при нажатии демо-версии div

Answer 1

Есть 2 способа реализовать это, во-первых, вы можете добавить onclick="clicked()" в элемент html, затем в javascript вам просто нужно определить функцию

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

В качестве альтернативы, если вы используетеjquery,

$(document).ready(function() {
  $('#svgid').click(function() {
    alert('It happened');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>

Answer 2

Вы имеете в виду что-то вроде этого, поэтому, когда вы нажимаете на текст, оповещение запускается.

Я переместил оповещение за пределы обработчика, так как в противном случае вы получите одно оповещение при первом нажатии на текстзатем два предупреждения во второй раз и т. д.

$('#svgid').click(function()
    {
       alert("clicked");

    });
document.getElementById("demo").addEventListener("click",     function()
{
  document.getElementById("svgid").dispatchEvent(new Event('click'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>