Как нажать на часть SVG на веб-сайте с Javascript?

Question

Javascript предоставляет метод с именем click().

. Это работает, например:

<a id="a" href="index.htm">Click here</a>

и

document.getElementById("a").click();

---

Но как насчет SVG-Элементы?

<svg>
  <g id="a" .....></g>
</svg>

Это не сработает:

document.getElementById("a").click();

Я могу успешно выбрать g-Tag, но у него нет метода щелчка:

document.getElementById (...). click - это не функция

Возможно ли как-то щелкнуть элемент внутри SVG-тега с помощью Javascript?

Answer 1

Вы можете просто создать и отправить событие вручную, например

document.getElementById("a").dispatchEvent(new Event('click'));

Это все, что делает метод click () под капотом. Это просто удобный метод.

Это будет работать с любым элементом SVG, включая <g> элементы.

Answer 2

используйте dispatchEvent(new Event('click')), если .click() не работает. Пожалуйста, проверьте скрипку на https://jsfiddle.net/mvqpg930/1/

Answer 3

Не совсем уверен, есть ли в JavaScript фактическое click() событие (я знаю, что его можно вставить как: onclick() в HTML). У jQuery есть событие click(). Тем не менее, я считаю, что вы должны добавить eventlistener, если вы используете JavaScript и не используете jQuery.

document.getElementById("a").addEventListener('click', function() {
     //do something
});

Answer 4

Вы пробовали "onclick" непосредственно в HTML?

Я знаю, что это брутально, но сработало ли это?

<svg>
  <g id="a" onclick="your code here"  .....></g>
</svg>