时间戳

首页 > 解决方案 > 我如何在百里香的帮助下设置 svg 圆圈的填充颜色

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

问题描述

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

标签： htmlcsssvgthymeleaf

解决方案

我对thymeleaf不是很熟悉，但是您可以使用内联样式元素（或样式表）设置 svg 元素的填充颜色，方法是省略fill所需元素上的属性，然后使用 cssfill属性设置颜色：

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

推荐阅读