как установить цвет заливки svg-круга с помощью тимелиста

Question

У меня есть изображение SVG на моей html странице. Я хочу залить цвет фона круга, используя тимелист . Я пробовал использовать встроенный тег стиля, но он не работает и устанавливает черный цвет фона круга svg.

<svg id="svg" height="50" width="50">
<circle cx="50%" cy="50%" r="50%" stroke="" stroke-width="3" fill="#3f51b5" />
<text x="50%" y="50%" text-anchor="middle" fill="white"font-family="Arial, Helvetica, sans-serif" font-size="25px"
alignment-baseline="central" th:value="${results.shortName}">OF</text>
</svg>

Answer 1

Спасибо @enxaneta. решил это, используя это

<svg id="svg" height="50" width="50">
<circle cx="50%" cy="50%" r="50%" stroke="" stroke-width="3"
th:style="'fill:'+@{${results.borderColor}}+';'" />
<text x="50%" y="50%" text-anchor="middle" fill="white" font-family="Arial, Helvetica, sans-serif" font-size="25px" alignment-baseline="central" th:text="${results.shortName}">OF</text>
</svg> 

Answer 2

Я не очень знаком с тимелеаф , но вы можете установить цвет заливки элемента svg, используя встроенный элемент стиля (или таблицу стилей), не указав атрибут fill в нужном элементе а затем с помощью свойства css fill установить цвет:

<svg id="svg" height="50" width="50">
    <circle cx="50%" cy="50%" r="50%" stroke="" stroke-width="3"/>
    <text x="50%" y="50%" text-anchor="middle" fill="white"font-family="Arial, Helvetica, sans-serif" font-size="25px" alignment-baseline="central" th:value="${results.shortName}">OF</text>
</svg>

<style>
    svg {
        fill: red;
    }
</style>