Под прозрачными местами контейнера SVG задействовать ссылки?

Question

[Dealaxer]

Приветствую всех!

Народ, вопрос вот в чем, есть объект SVG на HTML странице, в виде изогнутой волны:

контейнер имеет свою длину и ширину(выделено красной линией), объект имеет синий фон и вокруг него прозрачность.
Ниже добавлена ссылка с фоном.
Но ссылка не действует под SVG как не крути.
Если задействовать z-index'ы, то желтый фон будет над синим и ссылка будет работать.
А нужно чтобы желтый фон оставался под синим, а сама ссылка была выше SVG.
Что-то уже мозг поломал как сделать.

Может можно на SVG маску наложить, чтобы прозрачная область была доступна?

Народ у кого какие идеи?

Заранее благодарю!

Answer 1

[Ankhena]

pointer-events: none для svg
https://webref.ru/css/pointer-events

Comments

[Dealaxer]

Это хорошо, но в SVG есть вставки с текстом и ссылками, после применения pointer-events, они становятся не кликабельными.

[Ankhena]

Dealaxer: Значит это свойство нужно применять не ко всей SVG, а только к частям, которые ссылками не являются.

Более логичный и адекватный путь: сделать SVG на всю площадь прямоугольника и с разных контуров делать разные ссылки.

[Dealaxer]

Ankhena W: только к частям врядли, у меня цельный SVG контейнер + (text->textPath->tspan->a xlink:href) с ссылками, данное свойство не применимо.
Если сделать в контейнере несколько контуров, возможно это выход для известной длины контура и текста в нем, но беда в том, что неизвестна конечная длина текста, как и контура, поэтому был сделан единый контур по которому и идет текст ссылками, и текст меняется в зависимости от языка и т.д..

[Ankhena]

Dealaxer:
Верните ссылкам в SVG pointer-events обратно.

[Ankhena]

Dealaxer: Хорошо бы такие нюансы про ссылки указывать сразу в вопросе, а не заставлять играть нас в угадайку.
А лучше выкладывать код в песочницу или давать ссылку на сайт.

[Dealaxer]

Ankhena W: Ёлки палки, реально)). Похоже, пойду отдыхать, мозги летят к вечеру))
Ankhena, ОГРОМНОЕ СПАСИБО!
На весь SVG выставляем pointer-events: none, а на ссылки в теге text выставляем pointer-events: auto, и все), объекты под SVG видны.
Век живи, век учись! Наверное плохо искал в инете данную проблему.

[Dealaxer]

Ankhena W: так я и спрашивал, может кто в курсах, гадать особо то и не пришлось). Тут и без ссылок мало кто очевидное наговорил, кроме люто-костыля)).

Answer 2

[Евгений]

Контейнер с фоном под svg (z-index: -1). Ссылку в контейнер без фона над svg (z-index: 10). Но что-то подсказывает что это лютый костыль

Comments

[Dealaxer]

Спасибо за ответ!

Но это и правда люто.
Ссылка такого типа идет с фоном:

<svg>...</svg>
<ul style="background:yellow;">
   <li>
      <a href="#">Ссылка</a>
   </li>
</ul>

Вот и ломаю голову, как задействовать.