I am encountering an issue with my SVG where the linear gradient fill is not correctly applying the second stop color, and I am struggling to determine the cause of this issue

I'm experiencing an issue with my SVG where a linear gradient defined in CSS is not displaying properly. Even though the second color stop rule is correctly set to orange, only the first color is showing up in the rendered image. I've been trying to troubleshoot this problem but haven't been able to identify the cause.

When looking at the code below, it seems that the image appears as solid blue instead of showing the intended gradient effect.

linearGradient:nth-child(2n+1) stop:first-child {
  stop-color: blue;
}

linearGradient:nth-child(2n+1) stop:nth-child(2) {
  stop-color: orange;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 265 255" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<defs>
    <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.68,-154.08,154.08,-1.68,61.68,180)">
      <stop offset="0" style="stop-opacity:1"/>
      <stop offset="1" style="stop-opacity:1"/>
    </linearGradient>
</defs>
<g transform="matrix(1,0,0,1,-2908.03,-614.145)">
    <path d="M2918.29,629.251L2934.79,629.251L2934.79,631.958C2934.79,635.75 2937.87,638.837 2941.67,638.837C2945...

csssvggradient

Answer №1

gradient linear stop:first {
  tone-color: sapphire;
 }

 gradient linear stop:last {
   tone-color: tangerine;
 }

Answer №2

Success was finally achieved after eliminating the gradientUnit and gradientTransform properties!

linearGradient:nth-child(2n+1) stop:first-child {
  stop-color: blue;
}

linearGradient:nth-child(2n+1) stop:nth-child(2) {
  stop-color: orange;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 265 255" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<defs>
    <linearGradient id="_Linear1" x1="0" y1="1" x2="0" y2="0"  >
      <stop offset="0" style="stop-opacity:1"/>
      <stop offset="1" style="stop-opacity:1"/>
    </linearGradient>
</defs>
... (omitted for brevity) ...
</div>
</div>
</p>
    </div></answer2>
<exanswer2><div class="answer" i="69019393" l="4.0" c="1630512656" m="1630598592" v="1" a="TGFuZG9u" ai="14250237">
<p>The desired result was obtained by removing the gradientUnit and gradientTransform properties.</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>linearGradient:nth-child(2n+1) stop:first{
  stop-color: blue;
 }

 linearGradient:nth-child(2n+1) stop:nth-child(2){
  stop-color: orange;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" ... (omitted for brevity) ... >

...

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

Issues with navigation menus in Bootstrap/Wordpress

My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...

javascriptcsswordpressbootstrap-4

Can you provide a guide or instructions for incorporating material-ui icons into the svg-icons folder?

When trying to use material-ui icons from the svg-icons folder that I installed with npm, I noticed that each icon in the js files has a different import. This made it difficult for me to find the correct import for each icon. Is there a documentation or w ...

svgmaterial-ui

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Despite having an image prop in CardMedia, I kept encountering this error. Here is a snippet of the code: Error description: const Post = ({ post, setter }) => { const classes = useStyles(); return( <Card className={classes.card} ...

javascripthtmlcssreactjsmaterial-ui

The mobile page is refusing to scroll, causing all the text to bunch up at the top of the screen

After learning HTML/CSS/Js/PhP over a few months, I recently completed my first website. I am facing an issue with one of the pages on my website when viewed on a mobile device. The parallax scrolling header image does not scroll either horizontally or ve ...

htmlcss

SassError: Variable not defined

I have a file containing variables with different themes that I need to override: _vars.scss body { $bg-color: #fff } body.theme-dark { $bg-color: #333 } In my Angular button component, I am referencing these variables: button.scss @import '_va ...

cssangularsass

Using Three.js to display a CSS3D-rendered DIV in full-screen mode

After extensively experimenting with the three.js library, I was able to establish two distinct scenes – one canvas-rendered and the other css3d-rendered – both displayed using the same perspective camera. Note: Despite my efforts, I am constrained to ...

csshtmlthree.jsfullscreenperspectivecamera

Use an if statement in Angular to conditionally add a title attribute with an empty value to HTML

How can I conditionally add the title attribute to a div without creating another div and using ngIf? If the permission is true, I want to include a title in my div. Here's what my current div looks like: <div (click)="goToChangelog()&quo ...

htmlcssangular

Struggling with CSS Flexbox when it comes to organizing rows and combining Table and Table Cells

I've been struggling to fix a CSS flex problem for hours. My goal is to make sure that the three boxes in each row have the same height. While I'm familiar with using flex, I suspect that floats may be the root of the issue. Even after clearing t ...

cssflexbox

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

htmlcssbootstrap-4

Animation using CSS that starts with a horizontal slide and transitions into a diagonal slide

Can I create an animation to move a graphic image on an html page from the middle of the screen to the top left corner? Here is what I have so far: #img1 {
 bottom: 50%;
 display: block;
 position: absolute;
 a ...

htmlcsscss-animations

Having trouble with aligning middle of absolutely positioned block text vertically

I'm facing an issue with aligning h2 text vertically in the middle of a block. The situation is that I have multiple images with different heights but the same width (300px), each with varying amounts of text that may span over several lines and appe ...

htmlcss

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...

htmlcss

Transform HTML entities to an escaped string in CSS content dynamically

I am aware that special html-entities like &nbsp; or &#246; or &#x0F0; cannot be incorporated within a css block like the following: div.test:before { content:"text with html-entities like `&nbsp;` or `&#246;` or `&#x0F0;`"; } ...

javascriptcssdomhtml-entitiescss-content

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...

javascriptjqueryhtmlcss

What is the optimal resolution for a background image in a Cordova app?

Currently working on a Cordova application that requires different background images for various screens. Despite using media queries to provide the background image in different resolutions, we are facing an issue where the background image is not displ ...

androidioscsscordova

Error with jquery.mobile-1.4.5.min.css in Android webview following recent Marshmallow update has caused compatibility issue

Creating a web page using JQuery was successful and the page loaded correctly on an Android device (Nexus 5) through WebView. However, after updating the Nexus 5 to Android Marshmallow, the web page could no longer be viewed properly on the WebView. Inste ...

androidjqueryhtmlcsswebview

modifying the appearance of the play button through a JavaScript event without directly altering it

I am currently working on building a music player from scratch using HTML, CSS, and JavaScript only. To store the list of songs, I have created an array named "songs" with details such as song name, file path, and cover image path. let songs = [ {songNa ...

javascripthtmlcssevent-handlingaddeventlistener

Are there any performance implications when using an excessive number of background images in CSS?

My website seems to be running too slowly based on user reports. I suspect that the background images in CSS may be causing the issue. The site uses a custom build system to concatenate and compress all CSS, create CSS sprites automatically, resulting in ...

cssperformancebackground-imagecss-sprites

What method does the CSS standard dictate for measuring the width of an element?

In terms of measuring an element's width, Chrome appears to calculate it from the inner margin inclusive of padding. On the other hand, Firefox and IE determine the width of the box from the border, excluding padding but including the margin. Personal ...

cssinternet-explorerfirefoxgoogle-chromespecifications

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

csssencha-touch-2.3