Как поместить SVG поверх картинки?

Question

[Jedi]

Здравствуйте. Хочу реализовать что то вроде 3D макета здания. Как можно это реализовать с помощью SVG (Path) ?

Вот смотрите



Если наводить мышью на этажи то, они подсвечиваются.

Вот ссылка на разметку. Странно то, что они сначала разместили фотографию(то что наверху), а потом разместили svg path-ы. У меня вопрос, как они с такой точностью их разместили, так как если навести на каждый этаж то, всё идеально подсвечивается и не выходя за рамки отображается. КАК!?

вот вам ссылка на этот же сайт.
Пожалуйста помогите буду очень благодарен!! :)

Answer 1

[Максим Тимофеев]

как они с такой точностью их разместили

открыли редактор типа inkscape, кинули на back картинку, по ней разметили. сохранили svg

Comments

[Stalker_RED]

нет

[Максим Тимофеев]

Stalker_RED: как простой вариант, я не копал именно этот пример. Ваш кунг-фу лучше моего (убегает и плачет)

Answer 2

[Stalker_RED]

Там SVG на весь экран. И автоматически перегенерируется при изменении размера экрана.
Используется библиотека Raphael
Вот какой-то туториал: https://parall.ax/blog/view/2985/tutorial-creating...

Comments

[Jedi]

Вау! Спасибо! Спасибо больше!

[Stalker_RED]

PHPjedi: Было не сложно. Открыл в инспекторе, поскроллил до начала svg и вот:


В большинстве js библиотек в названии классов враппера содержится и название библиотеки.

[smithana]

Идея правильная, только рафаэль уже сто лет как не поддерживается.
Если ТС реализовывает новый проект, то лучше взять Snap.
Если память не изменяет, то это проект как раз от создателей рафаэля.

[Jedi]

smithana: Спасибо вам большое! А что вы думаете насчет SVG.JS ?

[Stalker_RED]

smithana: Как-же не поддерживается. Поддерживаеся, вот в феврале коммит был.
https://github.com/DmitryBaranovskiy/raphael/
Просто реализация svg в браузерах довольно давно устаканилась, и особо менять там нечего.

[Stalker_RED]

smithana: Как-же не поддерживается, вот в феврале коммит был.
https://github.com/DmitryBaranovskiy/raphael/
Просто реализация svg в браузерах довольно давно устаканилась, и особо менять там нечего.

PHPjedi: SVG.JS тоже норм. можете еще d3.js посмотреть, но возможно это оверкилл для ваших целей.

[Jedi]

Stalker_RED: Понятно, спасибо вам!

[Jedi]

Stalker_RED: Здравствуйте! Если конечно можете то, ответьте мне пожалуйста на новый вопрос. Спасибо!