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>
I’m not very familiar with thymeleaf, but you can set the fill color of an svg element using an inline style element (or stylesheet) by leaving out the fill attribute on the desired element and then using the css fill property to set the color:
<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>
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> 
