我如何在 thymeleaf 的幫助下設置 svg 圓的填充顏色

Question

我的 html 頁面中有一個 SVG 圖像。 我想使用thymeleaf填充圓形免費顏色。 我嘗試使用內聯樣式標簽，但它不起作用並將 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

我對thymeleaf不是很熟悉，但是您可以使用內聯樣式元素（或樣式表）設置 svg 元素的填充顏色，方法是省略所需元素上的fill屬性，然后使用 ZC7A628CBA22E28EB166AZ 屬性設置顏色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>

Answer 2

感謝@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>