Pointer Events SVG: области нажатия под вашу графику

SVG pointer-events управляет тем, какие части графики могут стать целью события указателя. Фигура с заливкой, тонкая обводка и пустое отверстие могут реагировать по-разному, даже если относятся к одной иллюстрации. Настройте область попадания под действие, которого ожидает читатель, затем проверьте пустые пространства так же тщательно, как цветные.

Это руководство — для графики веб-интерфейса: диаграммы с выделением, нажимаемой эмблемы или значка внутри кнопки. Если SVG уже содержит пригодные контуры, исправляйте код взаимодействия напрямую. Векторизация входит в процесс только тогда, когда редактируемая геометрия все еще заключена в PNG или JPG.

Начните с элемента, который получает нажатие

Для SVG значение auto по умолчанию ведет себя как visiblePainted. Видимая фигура может стать целью над заливкой, если fill не равен none, или над обводкой, если stroke не равен none. Спецификация интерактивности SVG определяет эти правила проверки попадания.

Это объясняет значок, который кажется сломанным: его обработчик может работать на обводке, но пропускать пустой центр. Браузер проверяет фигуру, а не предполагает, что каждая точка ее окружающего прямоугольника означает одно и то же.

Полезные варианты для этого процесса:

all не означает «каждая точка области просмотра SVG». Он все еще относится к геометрии элемента. Если хотите, чтобы реагировал конкретный прямоугольник вокруг тонкого рисунка, создайте его намеренно.

Также различайте прозрачное окрашивание и отсутствие окрашивания. fill="transparent" все еще является значением заливки; fill="none" удаляет заливку. Изменение одной лишь непрозрачности не является надежным способом заставить наложение игнорировать нажатия.

Проверьте заливку, отверстие и открытую обводку

Мы построили небольшую лабораторию встроенного SVG с исходными фигурами, созданными вручную. Она содержит синий составной контур с прямоугольным отверстием, оранжевую открытую обводку и копию этой обводки поверх отдельной прозрачной цели. Это учебные примеры, а не результаты преобразования PerfectVector.

В браузерной проверке нажатие на синюю полосу записывало ring. Нажатие на пустой центр записывало ring-stage, содержащий SVG. Оранжевая линия записывала trail, а пространство ниже ее вершины — stroke-stage. В третьей панели оба положения записывали hit.

Синий контур использует два прямоугольных подконтура и fill-rule="evenodd":

<svg id="ring-stage" viewBox="0 0 240 180">
  <path id="ring" fill="#2874c8" fill-rule="evenodd"
    d="M30 20H210V160H30Z M85 60H155V120H85Z" />
</svg>

Внутренний прямоугольник находится вне заполненной области по правилу заливки even-odd. Это настоящее отверстие. Белый прямоугольник, наложенный сверху, был бы другой окрашенной фигурой с собственным поведением попадания. Если неверна сама геометрия, используйте руководство по исправлению отверстий SVG перед изменением правил событий.

Вот открытая обводка из второй панели:

<svg id="stroke-stage" viewBox="0 0 240 180">
  <path id="trail" d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="stroke" />
</svg>

Для быстрой проверки поместите любой фрагмент в HTML-файл, а этот журнал событий — после него. Задайте SVG видимый размер, например width="360" height="270".

<output id="result" aria-live="polite">Click the artwork.</output>
<script>
  const stage = document.querySelector('svg');
  const result = document.querySelector('#result');
  stage.addEventListener('click', (event) => {
    result.textContent = `Target: ${event.target.id}`;
  });
</script>

Нажмите на окрашенную область, пустую внутреннюю область и угол вне рисунка. Запись event.target различает попадание в контур и нажатие, просто дошедшее до контейнера SVG. Эти примеры проверяют выбор цели; они не являются готовыми интерактивными элементами управления.

Добавьте область попадания без утолщения графики

Предположим, вся область вокруг оранжевой линии должна выделять эту линию. Увеличение видимой обводки изменило бы иллюстрацию. Отдельная цель дает области взаимодействия собственную геометрию:

<svg id="hit-stage" viewBox="0 0 240 180">
  <rect id="hit" x="20" y="20" width="200" height="140"
    fill="transparent" pointer-events="all" />
  <path d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="none" />
</svg>

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

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

Для простого значка с одним действием обычная HTML-кнопка часто дает нужную цель вообще без добавления прямоугольника SVG.

Оставьте клавиатурную активацию элементу управления

Выбор цели указателем не дает названия, клавиатурной активации или семантики кнопки. Поместите значок с одним действием в HTML-кнопку с понятным названием и оставьте графику декоративной:

<button id="select-trail" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"
    width="24" height="24" style="pointer-events: none">
    <path d="M3 20L12 4L21 20" fill="none"
      stroke="currentColor" stroke-width="3" />
  </svg>
  Select trail
</button>
<output id="selection" aria-live="polite"></output>
<script>
  const button = document.querySelector('#select-trail');
  const selection = document.querySelector('#selection');
  button.addEventListener('click', () => {
    selection.textContent = 'Trail selected';
  });
</script>

Обычный элемент button дает поведение элемента управления; видимый текст дает его название. Сохраните видимый индикатор фокуса. Используйте настоящую ссылку, если действие ведет на другую страницу.

В нашей лаборатории Tab фокусировал кнопку, а Enter и пробел по отдельности активировали ее. Проверьте эти клавиши и в своем реальном интерфейсе. Диаграмме с несколькими независимыми действиями нужен соответствующий дизайн клавиатурного взаимодействия; одна окружающая кнопка не может представлять все действия.

Настройка pointer-events: none также не является отключенным состоянием. Она не удаляет элемент управления, который иначе может получить фокус, из клавиатурной навигации. MDN описывает клавиатурный фокус и распространение событий: потомки могут снова включить выбор цели, а их события все еще могут пройти через обработчик родителя. Используйте стандартный атрибут disabled, когда кнопку нужно отключить.

Когда исходная графика — PNG

Если единственный исходник — плоский PNG или JPG, а интерфейсу нужны независимо редактируемые фигуры, процесс преобразования изображения в вектор PerfectVector может подготовить пробный SVG. Сравните его с оригиналом, проверьте важные отверстия и области и решите, какие части заслуживают отдельных целей взаимодействия.

Трассировка дает геометрию. Вашему приложению все еще нужны осмысленные ID, обработчики действий, названия, поведение фокуса и намеренные области попадания. Трассированный визуальный контур может быть намного подробнее области, на которую пользователь должен нажимать. Для небольшого значка интерфейса ручная перерисовка или существующий векторный оригинал могут быть проще в поддержке. Руководство по подготовке значков PNG объясняет, что проверить перед добавлением восстановленной графики в UI kit.

Если значок просто декоративный внутри элемента управления, значок через CSS-маску может подойти для управления цветом; действие все равно принадлежит окружающему элементу управления. Более общее руководство по векторизации рассматривает, когда вообще полезно восстановление контуров.

Проверьте нужную область перед выпуском

Проверяйте реальный отображаемый размер, а не только большой предпросмотр редактора:

1. Нажмите на заполненную область, обводку, каждое отверстие и пустые углы.
2. Проверьте цель события, если срабатывает неверное действие.
3. Проверьте прозрачные прямоугольники или наложения, перехватывающие указатель.
4. Подтвердите, что соседние цели не перекрываются неожиданно.
5. Используйте Tab, Enter и пробел, где уместно, с видимым фокусом.
6. Проверьте сенсорное взаимодействие на устройствах, поддерживаемых интерфейсом.

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

Если редактируемая геометрия отсутствует, попробуйте исходное изображение в PerfectVector, затем проверьте контуры и отверстия. Когда графика станет правильной, отдельно определите и проверьте область взаимодействия.

Частые вопросы

Почему SVG реагирует только при нажатии на обводку? При стандартном поведении указателя SVG фигура без заливки может стать целью только над нарисованной обводкой. Проверьте значение заливки и нужное действие. Используйте намеренную область попадания или окружающий обычный элемент управления, если пустое пространство должно активировать то же действие.

Делает ли pointer-events="all" весь SVG нажимаемым? Он делает целью области заливки и обводки элемента независимо от значений окрашивания или видимости. Он не превращает автоматически всю область просмотра SVG в цель. Добавьте явную фигуру или используйте окружающий элемент управления, если нужна эта область.

Может ли прозрачный прямоугольник получать нажатия? Да. Прозрачность не означает отсутствие геометрии или заливки у прямоугольника. Прозрачный прямоугольник с подходящим значением pointer-events может служить намеренной областью попадания, но может и случайно перехватывать нажатия.

Создает ли векторизация изображения доступные кнопки? Нет. Векторизация может создать редактируемую геометрию из растровой графики. Названия, клавиатурное поведение, обработчики действий, фокус и области взаимодействия нужно реализовать и проверить в интерфейсе.

Источники

1. W3C — SVG 2 Scripting and Interactivity — Определяет выбор целей указателя SVG и геометрию, используемую значениями pointer-events.
2. W3C — SVG 2 Painting — Определяет, как правила заливки задают внутреннюю область и отверстия контура.
3. MDN — pointer-events — Объясняет выбор цели, распространение, наследование и ограничения клавиатурного фокуса.
4. MDN — The button element — Описывает поведение обычной кнопки, ее название и отключенное состояние.