Svg Lineargradient Hidden If Svg Is Hidden in Seperate Class

SVG LinearGradient hidden if svg is hidden in seperate class

Either consider a different ID for the gradients:

.mobile {  display: none;}
.content-svg {  border: 1px solid black;}

<div class="desktop">  <!-- stuff here --></div>
<div class="mobile">  <svg class="mobile-svg" height="150" width="400">  <defs>    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />    </linearGradient>  </defs>  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />  Sorry, your browser does not support inline SVG.  </svg></div>
<div class="content">  <svg class="content-svg" height="150" width="400">  <defs>    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />    </linearGradient>  </defs>  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />  Sorry, your browser does not support inline SVG.  </svg></div>

Gradients hidden using SVG symbols

Instead of display: none, you can just use width="0" height="0".

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display:block">  <defs>    <style>.red-gradient{fill:url(#gradient)}</style>    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">       <stop offset="0%" stop-color="red"/>       <stop offset="100%" stop-color="darkred"/>    </linearGradient>  </defs>  <symbol id="mysymbol" viewBox="0 0 100 100">    <circle class="red-gradient" cx="0" cy="50" r="50" />    <circle fill="green" cx="100" cy="50" r="50" />  </symbol> </svg>
<svg><use xlink:href="#mysymbol" /></svg>

SVG linear gradient doesn't work on other elements

You have a gradient with cx="1202.5" cy="249.5" and a radius of r="18.5". This falls in the center of the first rectangle but far away from the center of the second one. The fill of this one is the peripheric red from the gradient.

A possible solution would be using the same path with the <use> element for all the identical paths you have. Next you give the use the required class.

Please observe that I've putted the path in the defs. Also the path has an id neded for the xlink:href of the use element.

.red-light{fill: url(#red-gradient);}

<svg viewBox="700 230 200 200">
  <defs>
    <radialGradient id="red-gradient" cx="1202.5" cy="249.5" r="18.5" gradientUnits="userSpaceOnUse">
      <stop offset="0.04" stop-color="#fff"></stop>
      <stop offset="0.12" stop-color="#fef4f3"></stop>
      <stop offset="0.28" stop-color="#fad8d4"></stop>
      <stop offset="0.49" stop-color="#f4aba1"></stop>
      <stop offset="0.74" stop-color="#eb6b5b"></stop>
      <stop offset="1" stop-color="#e1230a"></stop>
    </radialGradient>

    <path id="indicator" d="M1216.65,268h-28.3a4.69,4.69,0,0,1-4.35-4.35v-28.3a4.69,4.69,0,0,1,4.35-4.35h28.3a4.69,4.69,0,0,1,4.35,4.35v28.3C1221,268,1218.78,268,1216.65,268Z"></path>
  </defs>

  <use xlink:href="#indicator" id="indicator-3" data-name="indicator-3" class="red-light" transform="translate(-420)" />

  <use xlink:href="#indicator" id="indicator-10" data-name="indicator-10" class="red-light" transform="translate(-460,50)" />

</svg>

svg: one svg gradiant overlaps another svg on a page

You use the same id for different svg. This is #svg and #gradient. Technically, the second svg receives the parameters of the first svg according to id. For this reason, both your svg have the same gradient. The value of this attribute must be unique for each page:

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.

For the second svg, use a different id value for <svg id="" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">, <linearGradient id=""> and fill="url()".

For the value of the id of the second svg, I indicated #svg2 and #gradient2 (for example).

<div class="wave">
    <svg id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
        <defs>
            <linearGradient id="gradient">
                <stop offset="5%" stop-color="#7f00ffff"></stop>
                <stop offset="95%" stop-color="#e100ffff"></stop>
            </linearGradient>
        </defs>
        <path
            d="M 0,400 C 0,400 0,200 0,200 C 199.86666666666667,226.8 399.73333333333335,253.6 559,240 C 718.2666666666667,226.4 836.9333333333334,172.4 977,159 C 1117.0666666666666,145.6 1278.5333333333333,172.8 1440,200 C 1440,200 1440,400 1440,400 Z"
            stroke="none"
            stroke-width="0"
            fill="url(#gradient)"
            class="transition-all duration-300 ease-in-out delay-150"
            transform="rotate(-180 720 200)"
        ></path>
    </svg>
</div>

<div class="wave">
    <svg id="svg2" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
        <defs>
            <linearGradient id="gradient2">
                <stop offset="5%" stop-color="red"></stop>
                <stop offset="95%" stop-color="green"></stop>
            </linearGradient>
        </defs>
        <path
            d="M 0,400 C 0,400 0,200 0,200 C 199.86666666666667,226.8 399.73333333333335,253.6 559,240 C 718.2666666666667,226.4 836.9333333333334,172.4 977,159 C 1117.0666666666666,145.6 1278.5333333333333,172.8 1440,200 C 1440,200 1440,400 1440,400 Z"
            stroke="none"
            stroke-width="0"
            fill="url(#gradient2)"
            class="transition-all duration-300 ease-in-out delay-150"
            transform="rotate(-180 720 200)"
        ></path>
    </svg>
</div>

How to hide svg from the page?

The default value for the width and height attributes on the svg element is 100%, which means the SVG viewport depends on the parent container it's in.

From the w3 spec:

The SVG user agent negotiates with its parent user agent to determine the viewport into which the SVG user agent can render the document.

To solve your issue you can set the width and height attributes to 0 directly on the svg tag, but it's also possible to use CSS.

To prevent svg elements to take up space on the page use display: none. I'm not sure about browser support of gradients in this case, but there are work arounds. Check this Bugzilla post.

SVG use ignores Gradient styling

Workaround: define gadients in an inlined svg

Move the gradient <defs> to an inlined hidden <svg>.

It's important to hide this svg via zero width and height properties like width:0; height:0;position:absolute;.

display:none or visibility:hidden will remove/disable gradients, clip paths etc.

<!-- HTML svg use instance -->
<svg width="100" height="100" viewBox="0 0 100 100">
    <use href="#pb_svg_1" style="fill: url(#lg1); stroke:#000000;stroke-width:2 "/>
</svg>

<!-- Inline svg: hidden gradient definition -->
<svg style="width:0; height:0; position:absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
   <defs>
      <linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"/>
         <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
      </linearGradient>
   </defs> 
</svg>

<!-- External svg: 12.svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol  id="pb_svg_1" viewBox="0 0 100 100">
   <rect x="0" y="0" width="50" height="50" /></symbol>
</svg>

SVG Linear gradient hard stop

const stop2 = document.createElementNS('svgns', 'stop');

should be

const stop2 = document.createElementNS(svgns, 'stop');

See demo: https://codepen.io/smpao1/pen/vYdaWMW

The namespace is set to the namespace 'svgns', which will not get interpreted as a valid svg element, and is thus ignored.

Why are the gradients in this SVG displaying as black?

If the SVGs look okay when viewed in the browser, then it is unlikely to be the SVGs themselves.

My first suspicion would fall on the JS in your webapp and/or the way you are including the SVGs on your page.

How are the SVGs added to your page? Are the included using an <img> or <object>, or are you including them inline in your page? If it's the latter, then I would suggest the likely cause is the fact that you have duplicate id attributes in your SVGs. For example, both SVGs have gradients named accend_1_ and decend_1_. All ids need to be unique. Try giving them different ids.

If you are not inlining them, then please supply more information about how you are using them.

Svg Lineargradient Hidden If Svg Is Hidden in Seperate Class