Merge pull request #366 from Mitsutan/fix/scaled-gradient-svg-renderer

fix: scaled gradient svg renderer

Author: tdewolff

renderers/svg/svg.go

@@ -561,9 +561,15 @@ func (r *SVG) writePaint(paint canvas.Paint, m canvas.Matrix) string {
 			return fmt.Sprintf("url(#%v)", v[0])
 		} else if linearGradient, ok := paint.Gradient.(*canvas.LinearGradient); ok {
 			sb := strings.Builder{}
-			start := m.Dot(linearGradient.Start)
-			end := m.Dot(linearGradient.End)
-			fmt.Fprintf(&sb, `<linearGradient id="%v" gradientUnits="userSpaceOnUse" x1="%v" y1="%v" x2="%v" y2="%v">`, ref, dec(start.X), dec(r.height-start.Y), dec(end.X), dec(r.height-end.Y))
+			if m.IsSimilarity() {
+				start := m.Dot(linearGradient.Start)
+				end := m.Dot(linearGradient.End)
+				fmt.Fprintf(&sb, `<linearGradient id="%v" gradientUnits="userSpaceOnUse" x1="%v" y1="%v" x2="%v" y2="%v">`, ref, dec(start.X), dec(r.height-start.Y), dec(end.X), dec(r.height-end.Y))
+			} else {
+				// negate the Y coordinates because ToSVG(r.height) applies Y-axis reflection in its translation component,
+				// so negating the gradient coordinates cancels out the double Y-axis reflection to achieve correct positioning.
+				fmt.Fprintf(&sb, `<linearGradient id="%v" gradientUnits="userSpaceOnUse" gradientTransform="%v" x1="%v" y1="%v" x2="%v" y2="%v">`, ref, m.ToSVG(r.height), dec(linearGradient.Start.X), -dec(linearGradient.Start.Y), dec(linearGradient.End.X), -dec(linearGradient.End.Y))
+			}
 			for _, stop := range linearGradient.Grad {
 				fmt.Fprintf(&sb, `<stop offset="%v" stop-color="%v"/>`, dec(stop.Offset), canvas.CSSColor(stop.Color))
 			}
@@ -574,12 +580,14 @@ func (r *SVG) writePaint(paint canvas.Paint, m canvas.Matrix) string {
 			if m.IsSimilarity() {
 				c0 := m.Dot(radialGradient.C0)
 				c1 := m.Dot(radialGradient.C1)
-				det := math.Abs(m.Det())
-				r0 := det * radialGradient.R0
-				r1 := det * radialGradient.R1
+				scale := math.Sqrt(math.Abs(m.Det()))
+				r0 := scale * radialGradient.R0
+				r1 := scale * radialGradient.R1
 				fmt.Fprintf(&sb, `<radialGradient id="%v" gradientUnits="userSpaceOnUse" fx="%v" fy="%v" fr="%v" cx="%v" cy="%v" r="%v">`, ref, dec(c0.X), dec(r.height-c0.Y), dec(r0), dec(c1.X), dec(r.height-c1.Y), dec(r1))
 			} else {
-				fmt.Fprintf(&sb, `<radialGradient id="%v" gradientUnits="userSpaceOnUse" gradientTransform="%v" fx="%v" fy="%v" fr="%v" cx="%v" cy="%v" r="%v">`, ref, m.ToSVG(r.height), dec(radialGradient.C0.X), dec(radialGradient.C0.Y), dec(radialGradient.R0), dec(radialGradient.C1.X), dec(radialGradient.C1.Y), dec(radialGradient.R1))
+				// negate the Y coordinates because ToSVG(r.height) applies Y-axis reflection in its translation component,
+				// so negating the gradient coordinates cancels out the double Y-axis reflection to achieve correct positioning.
+				fmt.Fprintf(&sb, `<radialGradient id="%v" gradientUnits="userSpaceOnUse" gradientTransform="%v" fx="%v" fy="%v" fr="%v" cx="%v" cy="%v" r="%v">`, ref, m.ToSVG(r.height), dec(radialGradient.C0.X), -dec(radialGradient.C0.Y), dec(radialGradient.R0), dec(radialGradient.C1.X), -dec(radialGradient.C1.Y), dec(radialGradient.R1))
 			}
 			for _, stop := range radialGradient.Grad {
 				fmt.Fprintf(&sb, `<stop offset="%v" stop-color="%v"/>`, dec(stop.Offset), canvas.CSSColor(stop.Color))