Кто-нибудь, пожалуйста, объясните мне, какая часть 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 реагируют на события кликов? А также, как вы могли бы заставить весь квадрат вокруг формы реагировать на щелчок для лучшего взаимодействия с пользователем?
по умолчанию это заливка. Вы можете изменить это с помощью CSS-свойства pointer-events.
e.target.id даст вам идентификатор элемента, по которому вы щелкнули, который не будет "играть", он будет нулевым, так как элементы пути не имеют идентификатора, и все же они являются вещами, по которым можно щелкнуть.
fill:transparent
или fill:rgba( whatever )
или fill:hsla( whatever )
В этом сценарии я нашел следующее, чтобы работать
svg {
pointer-events: stroke;
}
Элемент svg теперь доступен для клика. Ранее он не отвечал на черную заливку.
console.log(e.target);
Затем нажмите на кнопку несколько раз. Вы увидите, что целью будет отдельный элемент, по которому щелкают в SVG, а это означает, что если вы не нажмете на оболочку (фон),id
будет нулевым, поскольку он не установлен для каждого пути . Вам понадобится другой метод обнаружения щелчка на кнопке p lay против идентификатора.