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

Question

[HealSpirit]

SVG вставил непосредственно в HTML через тег <svg>. Как я понял, через img и background-image не получится навешивать hover на SVG. Есть ли возможность использовать SVG как контейнер, в котором будут находится другие элементы (текст, картинки), но чтобы с самим SVG можно было взаимодействовать?
Пример - https://codepen.io/anon/pen/wxEYBo
Шаблон - https://w3layouts.com/bhagaskara-onepage-multipurp...

Answer 1

[alvvi]

https://codepen.io/anon/pen/QBZbOO

Answer 2

[unkstd]

просмотри файл svg в редакторе -> копируй весь код кроме тега xml -> вставь всё это дело туда куда тебе надо -> как в html можно элементы которые ты хочешь сделать интерактивными называть через классы -> ну и пошло поехало. только если ты хочешь творить такие вещи как эффекты при наведении или градиенты тут тебе гугл в помощь. надеюсь трудностей не возникнет
p.s стили надо писать внутри svg через тег style

Comments

[HealSpirit]

Если честно, то я ничего не понял из вашего ответа(

просмотри файл svg в редакторе

это понятно, можно открыть хоть в блокноте

вставь всё это дело туда куда тебе надо

туда это куда?) я вставил напрямую в HTML через тег. Теперь хочу, чтобы внутрь этого SVG можно было вставить хоть текст, хоть картинку, хоть новый SVG.
https://p.w3layouts.com/demos/bhagaskara/web/ -- вот тут в демо версии все есть, только сделано все через картинку, а не через SVG. Неужели, в 2018, нельзя это сделать, чтобы этот скругленный шестиугольник выступал в роли контейнера SVG, а внутри него могли находиться дочерние элементы.

[unkstd]

HealSpirit, да, как то не подумал. можно через img добавлять svg. надо просто определённый элемент в изображений называть с помощью классов и внутри тега svg прописывать тег style и уже как в обычном css обращаться ко всем элементам, даже использовать hover. а то что добавлять какие либо другие объекты в svg это легче конечно делать в редакторах векторных изображений по типу illustrator или gimp так как ручками это всё делать как по мне не удобно.
а про туда имел ввиду в то место на сайте куда вам угодно
надеюсь понятно объяснил

[alvvi]

HealSpirit, можно конечно, но вы уверены что вам именно это надо? Вы знаете как работает текст внутри SVG? Почему бы не объеденить SVG и HTML разметку одним контейнером и дальше размещать элементы как вам нужно с помощью CSS?

[HealSpirit]

Илья Ростопка, https://codepen.io/anon/pen/wxEYBo - во втором шестиугольнике то что мне нужно, ховер на родителе -> меняется фон, дети не меняются. Но я это сделал единым SVG (и шестиугольник, и символ карандаша, и текст), а нужно чтобы было так -- родитель: SVG контейнер (шестиугольник), ребенок 1: иконка карандаша (можно png, можно снова SVG), ребенок 2: текст через тег span, например. Или это слишком мудрено?

Почему бы не объеденить SVG и HTML разметку одним контейнером

не совсем понимаю эту фразу(

[alvvi]

HealSpirit, так тег <span></span> это невалидный SVG вообще, правильне здесь вот так сделать:

.item
  svg.svg
  .icon
  .text

[HealSpirit]

Илья Ростопка, я чета туплю и не могу уловить суть ваших и unkstd ответов.
Неужели внутри тега <svg> можно вставлять другие теги (например, <div>, <a>)?
Должно получиться наподобие такого:

<div class="item">
  <svg class="hexagon">
    <svg class="icon"></svg>
    <span>BLOG</span>
  </svg>
</div>

Но такое же невозможно? Разве нет?

[alvvi]

HealSpirit, да не должно такого получится, еще раз повторяю, тег <span></span> это невалидный SVG. Не может и не должно быть внутри тега <svg> ни div-ов, ни span-ов.

[HealSpirit]

Илья Ростопка, я тогда не понимаю, получается тег SVG не может быть чьим то родителем.
Тогда как вложить иконку и текст внутрь этого SVG шестиугольника?

Почему бы не объеденить SVG и HTML разметку одним контейнером

так и не понял эту фразу(

.item
  svg.svg
  .icon
  .text

и это не понял( это SASS?

[alvvi]

HealSpirit,

Тогда как вложить иконку и текст внутрь этого SVG шестиугольника?

Я вам даже разметку написал как это можно сделать без вложения.

и это не понял( это SASS?

Скорее pug или stylus, но это не суть, в html легко перевести.

<div class="item">
  <svg class="svg"></svg>
  <img class="icon" src="/path/to/icon" />
  <p class="text"></p> 
</div>

Не надо их с точки зрения разметки вкладывать друг в друга, у вас один элемент (svg) - бэкграунд, спозицинируйте его нужным образом с помощью CSS.

[HealSpirit]

Илья Ростопка, https://codepen.io/anon/pen/NBOWLJ -- если высота item раньше складывалась из высоты SVG, то сейчас она зависит от высоты текста и иконки, и если я сейчас уменьшу иконку карандаша до нужного размера, то весь item тоже уменьшится. position relative и absolute тут нужно было использовать? Или здесь нужно использовать background-image? Вот только у кого? У дива?

[alvvi]

HealSpirit, понятное дело что высота будет зависить от текста, раз вы самой фигуре добавили абсолютное позиционирование. Позиционируйте текст и иконку (можно обернуть в какой-нибудь элемент их) абсолютом, если размеры должны зависеть от фигуры. Впрочем и в вашем случае можно добавить что-то типа паддинга для .item, а саму фигуру растянуть на 100%, но это не очень адаптивно.

[HealSpirit]

Илья Ростопка, https://codepen.io/anon/pen/mjzJJy - так?
Сразу проблемы:
1) Иконка хоть и в центре абсолютом зафиксирована (есть размеры), но при уменьшении ширины родителя размеры иконки не меняются. Как менять размеры иконки при уменьшении размеров родителя? Это возможно при абсолютном позиционировании?
2) С текстом намного хуже. у него размером нет и трюк с позицией и соответствующим маржином не получится. Как текст в этой ситуации отцентровать?
3) Если навожусь на иконку карандаша или текста заливка у SVG пропадает, в принципе понятно почему. Ставить ховер и у иконки и текста, чтобы заливка у SVG оставалась? Или по другому можно сделать?

[alvvi]

HealSpirit, https://codepen.io/anon/pen/QBZbOO

[HealSpirit]

Илья Ростопка, спасибо, но такой адаптивности как здесь -- https://codepen.io/anon/pen/wxEYBo не добиться? Я имею ввиду уменьшение и иконки и текста при уменьшении ширины экрана? Только через медиа запросы?

[alvvi]

HealSpirit, если вам нужна адаптивность текста, делайте всю иконку одним svg-элементом. Это очевидно trade-off, либо тексты внутри SVG с их неспособностью к врапу и тд, либо доступные тексты в HTML, но без скейлинга.

[HealSpirit]

Илья Ростопка, ладно, я наконец то понял на счет этих 2 путей, но я не могу отметить решением ваш ответ. Процитируйте свою ссылку на codepen в исходной ветке, я отмечу решением

Answer 3

[svetlov97]

Используйте d3 вместо jquery. Или например anime.js