Is there a way to change the fill color of an SVG circle using Thymeleaf?

I am struggling to change the background color of a circle in an SVG image on my HTML page using Thymeleaf. I attempted to use inline style tags, but it resulted in the circle's background color turning 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>

htmlcsssvgthymeleaf

Answer №1

Although I haven't had much experience with thymeleaf, you can customize the fill color of an svg element by utilizing an inline style element (or stylesheet). Simply omit the fill attribute on the desired element and then employ the css fill property to specify 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>

Answer №2

Shoutout to @enxaneta for the help in solving 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover how to execute a function depending on a specific button in Node.js using Express

How can I trigger a function based on which button is clicked? I am working with an EJS file named test.ejs <form> <input type="submit" value="Click here 1"></input> <input type="submit" value="Click here 2">&l ...

htmlnode.jsexpress

Prevent image element from overflowing in HTML

How can I prevent the images on the right from extending beyond the right padding? I want the fourth image to align with the red block above it. https://i.sstatic.net/KUE62.png Does that clarify things? <div style="margin: 0 15px;height: 40px; back ...

htmlcssimage

Ways to Adjust the Text Size within Table Cells

I'm having trouble changing the font size in my table. I've tried adding the font size in the HTML tag, as well as in the CSS code for the Myposts class, but so far nothing has worked. Do you have any suggestions on how to successfully change the ...

phphtmlcssfontshtml-table

Printing without sufficient paper will result in an incomplete printout

https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...

javascriptcss

"Select2 dropdown fails to function properly upon returning to the page using the browser's

I've encountered an issue while working on a search page with Select2 dropdowns. Everything functions smoothly upon the initial page load, however, problems arise when a user performs a search, hits the browser back button, and then revisits the page. ...

javascripthtmlasp.net-mvcrazorjquery-select2

What is the best way to find out the height of a row?

I'm curious to understand why setting a height value for the first flex-item in the example below results in an increase in the height of the first row. It would be helpful to determine how to calculate the height of a row, especially when the height ...

htmlcssflexbox

Unable to make colors appear in HTML5 canvas using .fillStyle

Trying my hand at canvas for the first time to create a game. I have an image displaying, but strangely the fillStyle method doesn't seem to be working as expected (the canvas background remains white in Google Chrome). Just a note that in my code, t ...

javascripthtmlhtml5-canvas

Creating dynamic form fields using AngularJS

I have a form that includes an input field, a checkbox, and two buttons - one for adding a new field and one for deleting a field. I want to remove the add button and instead show the next field when the checkbox is checked. How can I achieve this? angu ...

javascriptjqueryhtmlangularjs

Ways to enlarge a div and its contents when hovering over it?

I am struggling to create a div that expands on hover and have been unable to make the content expand along with the div. I've experimented with various overflow options, but none of them seem to work. .grow { padding: 5px 5px 5px 5px ...

htmlcssexpand

What steps can I take to ensure these three images all have identical height and width?

Just starting out with Bootstrap 4 and I have a question about making images inside a card the same height and width. Can anyone help me figure out which div to input an attribute to achieve this? Here's the HTML code below the image: <link href ...

cssbootstrap-4

What is the best way to incorporate a splatter image within an MDX blog post?

I am working on an MDX blog where I render a blog post. pages/index.tsx <main className="flex min-h-screen dark:bg-black"> <div className="wrapper mb-24 gap-8 px-8 lg:grid lg:grid-cols-[1fr,70px,min(70ch,calc(100%-64 ...

cssreactjsnext.jscss-positionmdxjs

Iterating through the sorted list in reverse order, retrieving the text of each list item

Is there a way to navigate through an ordered list, extract and return the text based on a scenario where the user clicks on an li element like Cat 1-2? The goal is to concatenate all parent li's text into either a string or an array. If an array is u ...

javascriptjqueryhtml

Impeccable method to safeguard element from external css interference

Currently, I am working on a script that will be utilized across various pages and I want to ensure that the elements it generates are not affected by the CSS styles of those pages. Some individuals suggest using CSS like this: body>*{min-height:200px; ...

cssinheritance

The importance of scope in ng-style

I am attempting to dynamically change the font color in an input field based on the value entered into that field. However, I have encountered an issue with using ng-style as it is not recognizing the value of the scope and therefore the color does not upd ...

cssangularjs

Displaying search results from a PHP query in an HTML text box

Within my PHP page, I am populating a table with the results of a query using the following code: <?php $json=file_get_contents("http://www.example.com/myfile.php"); $data = json_decode($json); if (count($data->result)) { echo "<table id= &apos ...

phphtml

Having difficulty toggling a <div> element with jQuery

I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...

javascriptjqueryhtmlcss

Troubleshooting problem with displaying circular tag image below an image using Jquery

I'm looking to enhance my HTML DOM by adding circular tag images with dimensions of 25x25 pixels to all image tags. While my current method is functional, I've noticed that the position sometimes shifts and the tag often ends up displayed below t ...

javascriptjqueryhtml

Tips for maintaining an active link using CSS

I am looking to create a hover effect for links that remains active when the user is on a specific page. Essentially, I want a background to appear behind the link when it is visited. Below is the HTML code: <div class="menudiv"> <div id="menu"& ...

phphtmlcssmenu

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

javascripthtmlcss

Dynamic HTML text colors that change rapidly

I have an interesting question to ask... Would it be possible to create text that switches between two colors every second? For example, could the text flash back and forth between red and grey? I don't mean changing the background color, I mean act ...

javascripthtmlfontscolors