Utilize SVG gradients to stand out among other SVG designs

Essentially, I'm encountering an issue with two SVGs. When I try to change the color of the second SVG, it remains unchanged. However, if I change the color of the first SVG, it affects both of them.

In the following example, if you duplicate the circle and modify the color in the stop :

 <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FFE009" />
      <stop offset="100%" stop-color="#5eaefd" />
    </linearGradient>

This issue can be observed, and the only solution I've found is to assign a unique id for each SVG. However, this method is not very practical, especially when dealing with multiple SVGs.

Is there a fix or an alternative solution to this problem?

https://codepen.io/plava/pen/BjavpN

htmlcssreactjssvgsvg-filters

Answer №1

If you want to enhance your design, consider utilizing a separate SVG file that contains gradients, and then apply those gradients using CSS.

<style>
    .svg-1 {
        stroke: url(#gradient);
    }
    .svg-2 {
        stroke: url(#gradient2);
    }
</style>


<svg class="svg-1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="47"  stroke-width="6" fill="none" transform='rotate(90 50 50)'/>
</svg>
<svg class="svg-2" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="47" stroke-width="6" fill="none" transform='rotate(90 50 50)'/>
</svg>

<svg>
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#00bc9b" />
            <stop offset="100%" stop-color="#fff" />
        </linearGradient>
        <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#00bc9b" />
            <stop offset="100%" stop-color="#000" />
        </linearGradient>
    </defs>
</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

Return an array that has been filtered to exclude any elements that are also found in a separate array

I have an API that provides a list of cars. const getAsset = async () => dbApi('list_cars', ['', 100]) .then(result => result.map(e => e.symbol)); Here, the function getAsset returns the car list. 0: "BMW" 1: "HONDA" 2: " ...

javascriptreactjs

Ensure that the file exists before including it in the $routeProvider template for ng-include

Using Angular routes, I have set up a system where the slug from the URL determines which file to load. The code looks like this: $routeProvider.when("/project/:slug", { controller: "ProjectController", template: function($routeParams){ return & ...

javascripthtmlangularjsnode.jsroutes

css clip-path hover effect restricted to specific shape

In the codepen I created, there are two greyscaled shapes. Currently, it's only possible to hover over one of them, as the original size is a box that overlaps both images. Is there a way to detect the shape being hovered over? Z-index hasn't pro ...

javascripthtmlcss

Is it possible to integrate external JavaScript libraries with DialogFlow?

Is it possible to utilize external JavaScript libraries, such as React, within Dialogflow to develop a component? Additionally, can I use a library like Swiper.js to create a carousel and map payload data retrieved from my server using Axios in order to ...

reactjsnpmdialogflow-esswiper.js

Using jQuery's ajax to populate several div elements in a single call

Trying to wrap my head around jQuery's Ajax function. There exists a page composed of various divs, along with an XML document generated from a MySql resultset. Within the jQuery function displayed below, I successfully fill the titleDiv with data. M ...

phpjqueryxmlajaxhtml

Adding custom script files to your Create-react-app project

After creating an application using create-react-app, I have the need to include some scripts like bootstrap.min.js, jquery.min.js, and script.js. I placed these files inside app/styles/js and referenced them in index.html using script tags. However, I enc ...

reactjscreate-react-app

What is the best way for me to make sure the element overflows properly?

How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height? I've experimented with different combinations of overflow-y: scroll and min- ...

htmlcss

Open the iframe link in the main window

As a newcomer to this platform, I am trying to figure out how to make a link open in the parent page when clicking a button within an iframe. Currently, my code opens the link in a new window. <html> <body> <form> <div class ...

javascripthtmliframe

How can I achieve a floating effect for a div element that is contained within another element?

I have a container located within the body of my webpage. This container has margins on the left and right, as well as a specified width. Inside this container, there is a div element that extends beyond the boundaries of the container to cover the entire ...

htmlcssweb

Horizontal centering using Bootstrap 4 media

How can I horizontally center a media element? Here is the code for my media: <div class="container"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div class="media"> ...

htmlcssbootstrap-4

How can you combine accessibility with absolute positioning?

Have you seen our unique hamburger design? https://i.stack.imgur.com/AmT6P.png A simple click will reveal a neat popup (the class "open" is added to a div). https://i.stack.imgur.com/yPydJ.png This cool effect is achieved using fixed positioning, but i ...

htmlcssaccessibilitywcagwcag2.0

Tips for sending the image file path to a React component

Hey, I'm working on a component that has the following structure: import React from "react"; interface CInterface { name: string; word: string; path: string; } export function C({ name, word, path }: CInterface) { return ( < ...

reactjstypescript

Effortless 'rotational' script

I am currently developing a HTML5 Canvas game with the help of JavaScript. My aim is to create an object that smoothly transitions to a specific direction. The direction is being stored as a variable and calculated in radians. Here's how the code op ...

javascripthtmlcanvasradians

Is Chrome Facing an Autofill Glitch?

Can someone explain this strange behavior? When using Chrome, clicking on an input field triggers autocomplete for "country." However, if you change "country" to "city," the autocomplete shifts to that field instead. This issue seems to be isolated to thi ...

htmlgoogle-chromeautocomplete

Harvesting the local image file

Currently, I have implemented a form that allows users to upload images and crop them. The process flow has been established as follows: 1. User uploads the image 2. Server processes the image and sends it back to the browser 3. User crops the image a ...

phpjavascripthtml

React checkbox is experiencing an issue where the onchange event is returning as undefined the first time it is triggered

When using a React checkbox, the onChange event outputs undefined for the first click, and then shows a valid true or false output. I have tried searching online for a solution but have not been able to solve the problem. Can someone please help me identi ...

javascriptreactjs

Discover how to utilize SX to access the theme colors in Material UI

What is the correct way to access the theme colors using the sx property? I attempted the following code but it was unsuccessful. <Card sx={{ border: "2px solid primary.main", }} > ...

reactjsmaterial-ui

Unable to start React Native CLI Project Initialization

I recently started using React Native CLI for my CRUD project. After initializing the project and running 'npx react-native run-android' inside the project folder, I encountered the following errors: npx react-native run-android info Starting JS ...

androidnode.jsreactjsreact-nativenpm

Why is it that an HTML entity-containing string doesn't show the character after going through the htmlspecialchars() function?

In my project, I have a string of text retrieved from the SQL database which is then sanitized using PHP's strip_tags and htmlspecialchars functions to eliminate any HTML formatting that users might try to inject. This processed text is displayed in b ...

phphtmlhtml-entitieshtmlspecialcharsstrip-tags

Is it feasible to activate the calendar widget by simply clicking anywhere within the input field?

I've been working on a custom React component for a date picker, and I'm facing an issue. I want the calendar widget to open whenever a user clicks anywhere inside the input field, not just on the arrow icon. However, no matter what I try, the ca ...

htmlreactjsinputdatepicker