Как сделать гибкий SVG с ресайзом бекграунда?

Question

[CAMOKPYT]

У меня есть картинка с планом здания в png, я хочу на ховере подкрашивать некоторые области разной, неправильной формы. Я решил просто взять SVG прямо в браузере, сделать ему в качестве background-image картинку в png, нарисовать через path области, добавить стиль для path:hover и собственно всё. Это работает, однако SVG не скейлится как обычная картинка, если указать viewBox и preserveAspectRatio и выставить background-size: cover, то скейлится только сам SVG с нарисованными областями, картинка на бэкграуенде не скейлится никак. Собственно вопрос как сделать чтобы скейлилось всё - и фоновая картинка в png и сам SVG и правильно ли я так решать данную задачу?

https://css-tricks.com/scale-svg/ - не нашел то что нужно

Answer 1

[CAMOKPYT]

Нашел самое простое и удобное решение. Можно просто сгенерировать SVG в любом редакторе, а дальше вставлять не через background, а напрямую в верстку все path и стили, важно чтобы каждый path был отдельной областью, которую мы хотим подкрасить, а подкрасить проще простого - навесить класс для подкраски с ховером.

Пример - codepen.io/anon/pen/qdyQrr

Answer 2

[Сергей]

тут гляди akkord-smart.ru/plans картинке cover не делай, на этом сайте например стоит скрипт который наподобии ковера делает, я подобно делал у меня получилось goo.gl/2NKkmU

Answer 3

[Александр Гончаров]

В SVG можно добавить элемент на зад. И тогда он будет скейлиться вместе со всеми остальными элементами. Разве нет?

А вообще у нас есть плейлист про SVG, там куча всякого.