Как лучше всего выделять области на изображении по типу area?
У меня есть картинка, на ней есть здание и при наведении на отдельный этаж, мне нужно его подсветить. Подсветка - это отдельный кусочек этого этажа, который просто накладывается на при помощи позиционирования. Но проблема в том, что этажи не ровные, на картинке здание как бы в профиль.
Думал в сторону svg, но у наших дизайнеров нет возможности перерисовать подсвеченные области, т.к. не знают svg и нет иллюстратора для его изучения! Я попробовал сам эти картинки перевести их в svg, но получил не то что хотел, как я и думал. Код в svg был не тем, что нужен! В теге была закодирована моя картинка!
map с его area для меня оказался очень сложным, но как я не пытался сделать, браузер не хочет выделять мне тег area, если я наведу на ноду в консоли, что очень осложнило отладку.
Когда не знал как работать с SVG, для подобной задачи использовал этот ресурс. Загружаете изображение и поверх него чертите области этажей. В итоге получаете сгенерированный код map area.
Но такие вещи лучше делать через SVG.
Для SVG есть онлайн редактор . Поступаете аналогичным способом, загружаете изображение, создаете новый слой и на нем чертите области. Правда лично не пользовался.
Зачем нужен Illustrator??? Для изучения SVG достаточно простого текстового редактора, браузера, справочника и спецификации.
На крайний случай есть Inskape.
Можно посмотреть заметки и полезные ссылки на сайте Юлии Бухваловой.
Что же касается наклона — можно трансформировать как весь полученный плоский SVG, так и фигуры внутри него.
Средний
Простой
