Как задать границы над изображением с помощью SVG?

Question

[Jedi]

Здравствуйте. Сейчас изучаю SNAP.SVG, вроде бы всё понятно,но у меня всё же есть вопросы.
Как можно расположить Path поверх изображения?
Как с такой точностью реализовано у этих ребят?
Вот ссылка на них.
У них на сайте используется библиотека Raphael, но рафаель то устарел. Создатели библиотеки Рафаль создали новую, более быструю, и функциональную, называется SNAP.SVG.
Так вот я использую её.
Эти ребята, они поставили на фон здания, а потом насколько я понимаю, с пмощью path реализовали иллюзию выбора по этажам. Так как бы можно выбрать этажи, можете увидеть,прочувствовать если наведете(как показано у меня на скриншоте).
Вопрос в том, как я могу реализовать подобное с помощью SNAP.SVG ?
И еще, Как они добились такой точности, что при изменении размера экрана всё остается на своих местах? Да, я знаю что есть такая штука как адаптивность, но всё же.
Пожалуйста помогите мне, буду очень благодарен!!
Спасибо!

Comments

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

Вижу Ваш вопрос не первый раз. Такое ощущение, что спамите

[Jedi]

Максим Тимофеев: Здравствуйте, Максим смотрите сами, мне никто толком то и не ответил :( , а что мне делать?
Если конечно можно удалить прошлые вопросы то,я бы удалил.

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

PHPjedi: Ну не повторяйте кучу ссылок, выглядит подозрительно. Можно же дать ссылку на свой старый вопрос. Я вот помню, что отвечал Вам, но уже не помню что именно, а так бы глянул по ссылке и может новый ответ написал.

[Jedi]

Максим Тимофеев: Понятно. Да, я согласен с вами на все 100. Окей, Максим, спасибо.

[Jedi]

Максим Тимофеев: А знаете, странно, странно то, что никто мне так и не ответит. Я так понимаю что людям это всё не нужно(SVG и другие библиотеки).

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

PHPjedi: Я Вам точно отвечал, но уже не помню что. Вероятно Вас чем-то не устроил ответ. Поэтому будет ссылка на старый вопрос - будет ответ.

Answer 1

[Stalker_RED]

А знаете, странно, странно то, что никто мне так и не ответит. Я так понимаю что людям это всё не нужно(SVG и другие библиотеки).

На ваши вопросы и не дают ответов потому, что вы нормально вопрос не можете сформулировать, и фиг угадаешь про какие такие границы вы говорите.

Всего-то делов - нарисовать svg path в нужных местах. Как-то так. И заметьте - работает без всяких редакторов, рафаэлей, снапов и прочей магии.

Если вам интересно откуда я взял координаты для path - откройте консоль и покликайте по картинке.

Как они добились такой точности, что при изменении размера экрана всё остается на своих местах?

Вообще непонятная часть. Что не так с точностью? Или, по вашему, каждый раз объекты должны сдвигаться сами по себе?

И да, я не знаю как такое делать при помощи snap.svg или raphael, а если точнее - не знаю зачем их вообще применять для такой простой задачи.

Comments

[Jedi]

Спасибо.

[Jedi]

Здравствуйте, а как вы эти все координаты соединили в одно? Спасибо вам большое за ваши ответы, очень благодарен!

Как вы соединили координаты те, которые отображаются в консоли?
Существует ли программы в которых можно это все сделать немножечко проще(Например: Adobe Illustrator)?
А зачем вы указали viewbox, зачем он нужен?
А при изменении размера экрана, это все отобразится точно также?

Это все мои вопросы, пожалуйста ответьте на них. Кроме вас уж точно мне никто не ответит. Спасибо еще раз!

[Stalker_RED]

PHPjedi:

Кроме вас уж точно мне никто не ответит.

Я, конечно, польщен, но вы не пробовали делать как-то так?

Вот еще немножко: Как рисовать с помощью SVG path?

[Jedi]

Stalker_RED: Спасибо! Да, я не внимательный, увы =D . А как думаете, если добавить изображение в Illustrator, и начать рисовать там, это - хорошо или плохо? Я в плане того, что при изменении размера экрана, не будет ли это все разваливаться? И кстати, при экспорте в виде SVG, появляется тег image в котором изображение в виде непонятных мне кодов, как думаете, использовать как мне экспортнул иллюсттратор или просто воспользоваться path-ами ?

А как вы соединили координаты то, вы не рассказали..(

Спасибо!

[Stalker_RED]

PHPjedi: Вторую ссылку вы открывали? Задавайте более конкретный вопрос, а не в стиле "перескажите мне тут учебник в двух строчках".