Управлять цветом SVG

[Alessio18911]

У меня есть три обычных div, в каждый из которых вставлена SVG. Я работаю с handlebars. Поскольку блоки абсолютно одинаковые, только отличаются SVG, я хочу их пропустить через цикл handlebars. Но как в таком случае быть с SVG, чтобы не вносить их разметку в JSON? Если вставить просто как img, то тогда теряется контроль над их цветом. А при ховере на блок его SVG должна менять цвет с transition... Подскажите, пожалуйста, как быть в такой ситуации?

[Malleys]

Цвет вы можете уточнить при помощи 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>

[Alessio18911]

Спасибо большое за ответ! )