CODEWITHSUNDEEP
csssvg
Chlebqowy
Chlebqowy

Reputation: 23

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

I tried recreating https://stackoverflow.com/a/55269126/27557927 but it didn't work.

All I get is the fallback color.

On my real website, I also got "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 js that 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.

HTML

<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>

CSS

: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;}
}

JS (as I said earlier, only if that issue happens)

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"*/ 
}

Upvotes: 0

Views: 34

Answers (1)

Robert Longson
Robert Longson

Reputation: 124289

  • offset is not a CSS property it is an attribute. As such it does not accept any CSS such as calc or var, it only accepts numbers or percentages.

  • stop-color, is a mapped CSS property so it would accept calc and var etc.

Upvotes: 3

Related Questions