На какую часть SVG можно нажать?

Question

Кто-нибудь, пожалуйста, объясните мне, какая часть svg откликается на клик?Например, это заливка или обводка?

<svg class='arrow' id='play' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
    .st1{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<g>
    <path class="st0" d="M2.9,18.1c-0.2,0.2-0.4,0.1-0.4-0.1V1c0-0.3,0.2-0.3,0.4-0.1l8.3,8.3c0.2,0.2,0.2,0.5,0,0.7L2.9,18.1z"/>
    <path class="st1" d="M2.9,18.1c-0.2,0.2-0.4,0.1-0.4-0.1V1c0-0.3,0.2-0.3,0.4-0.1l8.3,8.3c0.2,0.2,0.2,0.5,0,0.7L2.9,18.1z"/>
</g>
<line class="st0" x1="12.5" y1="0.5" x2="12.5" y2="18.5"/>
<g>
    <line class="st0" x1="15.5" y1="0.5" x2="15.5" y2="18.5"/>
</g>
<rect x="0" y="0" width="100%" height="100%" fill="none" />
</svg>

У меня есть следующий пример здесь , и кажется кнопка воспроизведения / паузы (середина трех элементов управления)иногда не реагирует на нажатия и кажется, что заполненная область не реагирует.

Я пытался использовать события указателя, и это, похоже, не имеет никакого значения, даже с незаполненной прямоугольной формой, которая имеетдобавлен в конце каждого элемента svg.

Может ли кто-нибудь посоветовать мне, как элементы svg реагируют на события нажатия?А также, как вы могли бы заставить весь квадрат вокруг фигуры реагировать на щелчок для лучшего взаимодействия с пользователем?

Answer 1

В этом сценарии я обнаружил, что сработало следующее

svg {
  pointer-events: stroke;
}

Теперь элемент svg можно нажимать по всей кнопке.Ранее он не отвечал на черную заливку.

Answer 2

по умолчанию это заливка.Вы можете изменить это с помощью CSS-свойства pointer-events .

e.target.id даст вам идентификатор элемента, по которому вы щелкнули, это не будет «play»,он будет нулевым, так как элементы пути не имеют идентификатора, и все же это те вещи, по которым можно щелкнуть.