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

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet: <div class="faq_accordion" role="tablist"> <b-card no-body class="mb-1"> <b-card-header header-tag=" ...

csstwitter-bootstrapvue.jsbootstrap-4

Adjusting the text of a button when hovering over it will also trigger a resizing of the

Currently, I am facing an issue where the bootstrap button's size changes when hovered over. My intention is to have the bootstrap button remain a fixed size while only the text inside it changes using javascript for mouseover and mouseout events. How ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using JavaScript and HTML, showcase the capital city of a country along with its corresponding continent

As a newcomer to this platform, I am excited to share a code snippet that I have created using HTML and JavaScript. The code generates a textbox in an HTML page where users can type the name of a country. Upon inputting the country's name, the code dy ...

javascripthtml

Creating unique styles with styled components without the use of selectors

Is it possible to achieve contextual styling without using CSS selectors? For example: <Button primary> <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0 <Icon/> // if the button is primary then ...

cssreactjsreact-nativestyled-components

IOS Troubleshooting: Ineffectiveness of the Transform

So I am encountering a slight issue while trying to incorporate this code on iOS because I am not familiar with how iOS operates. On my website, I have implemented a circle that works perfectly fine on browsers and Android devices. However, when it comes t ...

ioscsstransform

Flask does not provide a direct boolean value for checkboxes

After struggling for a week, I am still lost on where to make changes in my code. I need the checkbox to return a boolean value in my Flask application. Below are snippets of the relevant code: mycode.py import os, sqlite3 from flask import Flask, flash ...

javascriptpythonhtmlcssflask

Is it possible to reverse the effects of @media queries for min/max width and height?

I rely on http://www.w3.org/TR/css3-mediaqueries/ to customize my design based on the available viewport size. When I need to adjust the breakpoints, I struggle with negating @media (min-width: 500px), which overlaps with (max-width: 500px). To counter th ...

cssmedia-queriesnegation

Determine whether the server request originated from an Ionic mobile application

Currently, we are in the final stages of completing an Ionic project with a PHP backend. To enhance the security of our backend and protect it from external influences, we aim to restrict access to the backend only from within the Ionic project (native app ...

phphtmlcsssecurityionic-framework

Incorporating Ajax comments into an Ajax-powered status feature

I'm currently in the final phase of implementing ajax in my feed. Originally, I thought it would be a simple matter of pasting the comment input, but it turned out to be more complex than I anticipated. I placed the input below the main ajaxed status ...

phpjqueryhtmlajax

Enhancing jQuery UI Tabs with HoverIntent

I'm currently working on incorporating HoverIntent into my jQuery tabs, but I seem to be facing some issues. Below is the code snippet that I've been using. Any suggestions or tips would be greatly appreciated. Thank you! The code was sourced di ...

jqueryhtmljquery-uihoverintent

Developing HTML5 animation by utilizing sprite sheets

Struggling to create an engaging canvas animation with the image provided in the link below. Please take a look at https://i.stack.imgur.com/Pv2sI.jpg I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to ...

javascripthtmlcsscanvas

HTML elements are replaced by codes on the screen

After setting up an ajax request to run at regular intervals, I encountered a problem when trying to navigate back. Instead of displaying the expected HTML elements, the browser showed all of my HTML code. <script> window.setInterval(function () ...

htmlajaxlaravel

Tips for updating sass import files as the body class changes

Is there a way to dynamically change the SCSS file with color variables based on the changing body class? For example, if my HTML includes: <body class="custom"> ... </body> I would like to load in style.scss: @import 'custom&a ...

cssimportsass

PHP version 7.2.1 is throwing an error indicating an undefined index for the file_upload

Encountering an error message: Notice: Undefined index: file_upload in C:\MAMP\htdocs\basic_files\upload.php on line 3 Each time I attempt to upload a file using the form. While many attribute this issue to problems with enctype or ...

phphtmlfile-uploadundefined-index

I am looking to transfer an image stored in a database onto a card

One issue I am facing is that when trying to display an image from a database, uploaded by a user and showing on a card with additional information like name and price, an icon resembling a paper with green appears in the output. Here's my code snippe ...

javascriptphphtmlmysqlajax

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...

cssapachefontssassdirectory-structure

Steps for organizing a list based on the number of clicks

I've created an HTML list with images of political party logos. Each logo is a grid item that can be clicked on. I want to sort the list based on the number of clicks each logo receives, essentially ranking them by popularity. However, I'm not su ...

javascripthtmlcss

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row. Here is an example: <div> <table> < ...

javascriptcssreactjsstyled-components

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs