How to mirror an svg gradient?

R

resibe2021-11-17 02:48:23

HTML

resibe, 2021-11-17 02:48:23

hello i made this svg

<!DOCTYPE html>
<html>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg"


      width="50%"
      height="50%"
      viewBox="0 0 1 1"
    >
  <defs>
    <linearGradient id="l1" gradientTransform="rotate(90)">
      <stop offset="0%"  stop-color="green" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>

    <linearGradient
    id="l2"
    xlink:href="#l1"
    gradientTransform="rotate(180)"
    />
    </defs>
      <rect x="0" y="0" width="0.5" height="0.5" fill="url(#l1)" />
    <rect x="50%" y="50%" width="0.5" height="0.5" fill="url(#l2)" />
    </svg>
  </body>
</html>

But the bottom gradient is not mirrored with respect to the first one, how can I fix this

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Softlink, 2021-11-17
@resibe

After rotating the gradient, it must also be moved through translate . In your case, you can also apply transform-origin . Read about transforms and coordinates in svg gradients.