Управлять цветом SVG
У меня есть три обычных div, в каждый из которых вставлена SVG. Я работаю с handlebars. Поскольку блоки абсолютно одинаковые, только отличаются SVG, я хочу их пропустить через цикл handlebars. Но как в таком случае быть с SVG, чтобы не вносить их разметку в JSON? Если вставить просто как img, то тогда теряется контроль над их цветом. А при ховере на блок его SVG должна менять цвет с transition... Подскажите, пожалуйста, как быть в такой ситуации?
|
Цвет вы можете уточнить при помощи CSS.
<style> div circle { transition: 500ms; } div:nth-child(1) circle:hover { fill: deeppink; } div:nth-child(2) circle:hover { fill: gold; } div:nth-child(3) circle:hover { fill: yellowgreen; } </style> <!-- Здесь типа сгенерировано 3 одинаковых блока --> <div> <svg height="100" width="100"> <circle cx="50" cy="50" r="50"> </svg> </div> <div> <svg height="100" width="100"> <circle cx="50" cy="50" r="50"> </svg> </div> <div> <svg height="100" width="100"> <circle cx="50" cy="50" r="50"> </svg> </div> |
Спасибо большое за ответ! )
|
Часовой пояс GMT +3, время: 02:32. |