Can a stroke in an SVG image be created using a gradient color?

Is it possible to create a gradient in the stroke color of these two lines, currently set to #389967, within this SVG?

.chart-three svg .circle-foreground {

  stroke: #389967;
  stroke-dasharray: 494.55px 549.5px;
  stroke-dashoffset: 494.55px;
  stroke-linecap: round;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

You can find the complete source code here. It's written in SCSS, but can be compiled into CSS :

https://codepen.io/kunalkamble/pen/XXbWwN

I am trying to change the foreground color of this chart to create a gradient effect. Do you know if this is achievable?

I envision creating a meter that indicates energy consumption, transitioning from green at 0% to red at 100%.

Thank you in advance for any help!

csssvgsass

Answer №1

You can achieve this effect by incorporating an SVG pattern image for your stroke, although keep in mind that rounding the edges may no longer be possible. The stroke caps extend slightly beyond the start of your element, allowing a hint of the red gradient color to show through unless you make adjustments.

For a demonstration, visit this link.

<svg role="img" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="fillColors" patternUnits="userSpaceOnUse" width="200" height="200">
      <image xlink:href="http://willmurdoch.com/images/strokeGrad.jpg" width="200" height="200" />
    </pattern>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
  </defs>
</svg>

To apply this, use the SVG pattern as the foreground color. If you wish to use the same image provided in the example, it is recommended to save and upload it from a different source, as it is currently hosted on a personal server.

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

Steps for achieving uniform positioning of a div element that dynamically appears within a table with two rows and four table data cells

If I want to display the same div in different positions dynamically on my page, how can I achieve that? My page has a table with two rows and two columns, each containing an Embed button. When these buttons are clicked, a div is shown with a list of site ...

jqueryhtmlcss

Align text vertically within a link box by overriding inherited CSS styles

Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/ <a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton"> LCARS Locomotive O.S. </a> My issue pertains to the alignment of text within a graphic. I am utilizing this particular button ...

cssinheritance

Changing React Phone Number input field's default style: A step-by-step guide

Is there a way to modify the appearance of the react-phone-number-input component using this npm package: https://www.npmjs.com/package/react-phone-number-input? I am working with React Hook Form and Tailwind CSS alongside this component. However, I' ...

cssreactjstailwind-cssreact-hook-form

Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to use personalized fonts alongside Google web fonts?

I'm looking to incorporate my customized font into a website using Google's font loader. Any recommendations on how to achieve this? ...

cssfontswebfontscustom-font

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLin ...

javascripthtmlcssangularbootstrap-4

javascript mobile nav event

My website utilizes a bootstrap feature for mobile devices where a left sidebar pops up when clicking a button. I am not very familiar with bootstrap, but I would like to link a javascript event to determine if the left sidebar is visible. How can I achiev ...

javascripthtmlcsstwitter-bootstrap

Flexbox positioning: Absolute element within a relative container

Having a div using display:flex and position:relative, I am looking to add an overlay element at the bottom of this div by applying position:absolute to it. Ideally, the height of the overlay should be auto, but it's not necessary. The issue arises wh ...

htmlcssflexbox

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

Gallery Pagination using JQuery is not working properly

I am experimenting with the jquery easy paginate plugin on a separate page of my Blogspot. The images are displaying properly, but the pagination and CSS are not showing up. I need to adjust my CSS to make this jQuery pagination work correctly. Can someone ...

javascripthtmljquerycss

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: https://i.sstatic.net/SXaTA.png The issue arises whe ...

htmlcsstwitter-bootstrapfootersticky

What is the best method for styling arrays displayed by React in version 15 using CSS?

React v15 has made a change where elements of arrays in JSX are now rendered as <!--react-text:some_id-->text<!--/react-text--> instead of spans. I've searched for a solution but haven't been able to figure out how to apply CSS styles ...

javascriptcssreactjs

Adding CSS styles to an HTML page using JavaScript

Unfortunately, I do not have the ability to access the HTML directly as it is generated dynamically by a program. However, I do have access to the JS page that is linked to it. As an example, I am able to manipulate elements using JavaScript like so: ...

javascripthtmlcss

The CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code: .about-panel:hover p { color: white; font-size: 1em; white-space: wrap; overflow: hidden; -webkit-animat ...

htmlcssweb

Can one determine whether an SCSS element is devoid of content?

Can SCSS be used to determine if an element is empty? For instance, I'm interested in assigning a variable based on whether the class has content or not. <div class="defaultClass"> <!-- This div is empty --> </div> Is there a w ...

csssassstyles

All components in my app are being styled by CSS files

Currently, I am facing an issue with my React app in VS Code. My goal is to assign a distinct background color to each component. However, the problem arises when unwanted CSS styles from other files start affecting components even though they are not impo ...

cssreactjs

conceal elements created with JQuery within an AJAX function

Is it possible to use jQuery and the $.ajax() method to submit a form, displaying only the result while hiding other elements on the page? I am looking to add a conditional in the Ajax method that will show the result if successful, hiding certain elements ...

phpjqueryhtmlcssajax

Utilizing Bootstrap 4 to ensure the final DIV is vertically stacked and fills the remaining space in the container

Having trouble creating a responsive layout using Bootstrap 4? Specifically, when two divs wrap vertically on smaller devices, the top div pushes the lower div down, exceeding the parent container. I want the lower div to fit within the container. How can ...

htmlcssbootstrap-4

Is it possible to extract a div from a third-party domain and showcase it on my website?

Trying to integrate content from my Veetle.com channel onto my personal website has proven to be quite the challenge. Initially, I attempted to modify an iframe with CSS to display only the schedule information, but encountered limitations due to using 3rd ...

javascriptcssiframecross-domaindynamic-data

Rotating arrows enhance the functionality of the accordion menu

I have successfully implemented a basic accordion with rotating arrows on click. Everything is working smoothly except for one issue: When I collapse one item and then try to collapse another, the previous arrow does not return to its default state. Is ...

javascriptjqueryhtmlcssaccordion