我如何在百里香的帮助下设置 svg 圆圈的填充颜色答案

【问题标题】：how do i set fill color of a svg circle with the help of thymeleaf我如何在百里香的帮助下设置 svg 圆圈的填充颜色
【发布时间】：2020-11-03 17:14:20
【问题描述】：

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

【问题讨论】：

你是说：我尝试过使用内联样式标签，但它不起作用它可以！。请使用如下内容：style="fill:red"
@AnandYadav 不要乞求积分，但如果您的问题已解决，请接受答案，让其他人知道他们不必再看这个问题了。

标签： html css svg thymeleaf

【解决方案1】：

我对 thymeleaf 不是很熟悉，但是您可以使用内联样式元素（或样式表）设置 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>

【讨论】：

【解决方案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>

【讨论】：

你可以这样做：th:style="|fill: ${results.borderColor};|"（只是为了让它看起来更好）。