Calculate Gradient Transform for SVG linear gradient

Brian_Alfaro1 · October 18, 2022, 1:24am

Does anyone know how to calculate the x1 x2 y1 y2 of a svg from figma gradientTransform information.

Example

gradientTransform:[
   0:[
      0:-0.8554036021232605
      1:-0.6393925547599792
      2:1.231164574623108
   ],
   1:[
      0:0.9316599369049072
      1:-1.2464098930358887
      2:0.7044920921325684
   ]
]

How would it translate to a LinearGradient when I export the svg from figma it calculates it as this. Not sure how to get those values myself. Any help would be appreciated

<linearGradient x1="111.5" y1="105" x2="12.5" y2="31" />

BennoDev · June 23, 2023, 4:23am

Have you already figured it out?

BennoDev · July 12, 2023, 7:45am

this one worked for me

github.com

figma-plugin-helper-functions/figma-plugin-helpers/blob/master/src/helpers/extractLinearGradientStartEnd.ts

import matrixInverse from 'matrix-inverse'
import { applyMatrixToPoint } from './applyMatrixToPoint'

/**
 * This method can extract the x and y positions of the start and end of the linear gradient
 * (scale is not important here)
 *
 * @param shapeWidth number
 * @param shapeHeight number
 * @param t Transform
 */
export function extractLinearGradientParamsFromTransform(
	shapeWidth: number,
	shapeHeight: number,
	t: Transform
) {
	const transform = t.length === 2 ? [...t, [0, 0, 1]] : [...t]
	const mxInv = matrixInverse(transform)
	const startEnd = [
		[0, 0.5],

This file has been truncated. show original