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

1

Кто-нибудь, пожалуйста, объясните мне, какая часть 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 реагируют на события кликов? А также, как вы могли бы заставить весь квадрат вокруг формы реагировать на щелчок для лучшего взаимодействия с пользователем?

  • 0
    Попробуйте просто добавить это в ваш прослушиватель событий: console.log(e.target); Затем нажмите на кнопку несколько раз. Вы увидите, что целью будет отдельный элемент, по которому щелкают в SVG, а это означает, что если вы не нажмете на оболочку (фон), id будет нулевым, поскольку он не установлен для каждого пути . Вам понадобится другой метод обнаружения щелчка на кнопке p lay против идентификатора.
  • 0
    @MattClark, что бы вы предложили, чтобы быть лучшим способом достижения этого? Есть ли способ обернуть все элементы SVG и слушать это? Или svg будет заполнять пространство внутри div, которое в свою очередь не слушается? Или было бы неплохо перебрать все элементы в SVG?
Теги:
svg
addeventlistener
click

2 ответа

3

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

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

  • 0
    Я бы добавил, что если фигура не имеет заливки, но должна быть кликабельной, вам нужно использовать прозрачную заливку, такую как fill:transparent или fill:rgba( whatever ) или fill:hsla( whatever )
  • 1
    @exaneta, абсолютно нет, вместо этого используйте указатель-события. fill: прозрачный - гораздо менее эффективный.
0

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

svg {
  pointer-events: stroke;
}

Элемент svg теперь доступен для клика. Ранее он не отвечал на черную заливку.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню