lottie-web
lottie-web copied to clipboard
fix: Avoid desync between start and end (outer and inner) radial gradient circles
Due to the way _mdf
(modified) flags are checked in SVGElementsRenderer.renderGradient()
, it's possible that the fx
and fy
components of a radial gradient, defining its "inner" circle (used for highlights via .h
and .a
members of a gf
shape element in the Lottie JSON), fall out of sync with cx
and cy
which define its outer circle.
In particular, the branch which sets fx
/fy
triggers only when the gradient end point changes, but then sets fx
and fy
based on a calculation that involves both the start and end points. Therefore, if the start point of a gradient ever changes without a corresponding change in the end point, the cx
/cy
value will be updated but not the fx
/fy
value, causing visual artifacts.
File exhibiting issue: radial-gradient-repro.json
Current rendering:
After fix: