csssvg

Linear gradient from an svg can't be applied as fill for the same svg

I tried recreating the gradient from this Stack Overflow answer, but it didn't work; all I get is the fallback color.

On my real website, I also got the error:

unexpected value var(--percentB) parsing offset attributes

With the JS, but that doesn't seem to happen here.

In case the error is back, I also kept the animation and the JSthat seems to cause it.

I couldn't replicate it at all though, even if I copied my code, even the parts not regarding that variable.

It doesn't display either way though.

function reverse(){
  document.getElementById('#anim').innerHTML=`<stop offset="var(--percentC)" stop-color="var(--colorC)"></stop>
         <stop offset="calc(var(--percentB)*1%)" stop-color="var(--colorB)"></stop>
       <stop offset="var(--percentA)" stop-color="var(--colorA)"></stop>`/*bannerZmiana.background="blue"*/ 
}
:root {
  --percentA: 0%;
  --percentC: 100%;
  --colorA: red;
  --colorB: pink;
  --colorC: orange;
}
.bannerPath{
  fill: url(#anim) #f00;
}
/* Only needed if the error above is also the case here */
@property --percentB {
  syntax: "<number>";
  initial-value: 50;
  inherits: false;
}
.anim {
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-timing-function: linear;
}
@keyframes fade {
  0% {--percentB: 0.01;}
  99.99% {--percentB: 99.99;} 
  100% {--percentB: 0.01;}
}
<svg width="300" height="200" class="banner">
  <defs>
    <linearGradient id="#anim">
             <stop offset="var(--percentA)" stop-color="var(--colorA)"></stop>
         <stop offset="calc(var(--percentB)*1%)" stop-color="var(--colorB)"></stop>
       <stop offset="var(--percentC)" stop-color="var(--colorC)"></stop>
      </linearGradient>
    </defs>
  <path class="bannerPath"
    d="
  M300 0
  L300 40
  A60 60 0 0 1 240 100
  L0 100
  L0 0 
  Z"
  ></path>
</svg>

<button onclick="reverse()" class="anim">
k
</button>

Solution

  • On a gradient stop element