Блог

Главная - Вопросы по программированию - Svg, чтобы можно было нажимать и не мешать YouTube

Svg, чтобы можно было нажимать и не мешать YouTube

javascript #css #svg

#javascript #css #svg

Вопрос:

У меня проблема с svg, находящимся на YouTube.

Если вы наведете курсор мыши, просто переместитесь в правую часть svg и щелкните, видео не откроется, вместо этого оно вернет вас на предыдущую страницу.

Нажатие на пробел между svg, который должен открыть видео YouTube, этого не делает, вместо этого оно возвращает вас на предыдущую страницу.

Все, что находится за пределами svg, должно быть YouTube.

Только область в пределах красной линии должна быть доступной для перехода пользователя на главную страницу

pointer-events: none; должно быть на месте, иначе это мешает видео на YouTube.

Проблема с использованием:

 svg.home {
 pointer-events: none;
}

Хотя это работает, когда svg не мешает,
это также отключает возможность нажимать на svg.

Как это можно исправить?

Мне нужно, чтобы svg можно было щелкнуть и не мешать YouTube.

https://jsfiddle.net/hwm8qtoz/1/

 .home {
  position: absolute;
  top: calc(60% - 25px); /*25px is half the height of the svg*/
  left: 0px;
  width: 50px;
  height: 50px;
  fill: green;
  cursor: pointer;
}

введите описание изображения здесь

Комментарии:

1. «Нажатие на пробел между svg» Вы говорите о пространстве, которое показывает дверь в этом значке home svg? Вы хотите сказать, что только область в пределах красной линии должна быть доступна только для перехода пользователя домой?

2. ДА…………… Щелчок между пробелом должен открыть youtube. Все, что находится за пределами svg, должно быть YouTube.. «только область в пределах красной линии должна быть доступной для перехода пользователя домой» Да.

Ответ №1:

Потому что CSS имеет модальный блок, и все является коробкой. Таким образом, весь дом находится внутри коробки, и вся коробка будет кликабельной, или вся коробка не будет кликабельной.

Это можно решить двумя способами

  1. Вы можете разделить свой домашний SVG на несколько svg. например, 3 части = (Домашняя крыша домашняя левая сторона Домашняя правая сторона). Расположите эти svg таким образом, чтобы они выглядели как дом, а затем сделайте родительский элемент этих SVG кликабельным, который приведет вас на предыдущую страницу.
  2. Создайте свой SVG, используя несколько путей, и сделайте каждый путь индивидуально интерактивным (переводя пользователя на предыдущую страницу). Смотрите это для идеи http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps
Метки: , ,