Search code examples
htmlcsssvgthymeleaf

how do i set fill color of a svg circle with the help of thymeleaf

I have a SVG image in my html page. I want to fill the circle bacground color using thymeleaf. I have tried using inline style tag but it doesnot works and sets the svg circle background color to black.

<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>

Solution

  • Thanks to @enxaneta. solved it using this

    <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>