search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.01k stars 1.07k forks source link

Define gradient direction using start and end points #1191

Closed matthiasferch closed 2 years ago

matthiasferch commented 3 years ago

I am porting some HTML canvas drawing code to SVG.js and I'm impressed by the simple and elegant API.

However, the direction of linear gradients on a canvas is defined using start and endpoints: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

SVG.js, on the other hand, expects percentages to define a gradient's direction: https://svgjs.com/docs/3.1/shape-elements/#gradient-from

It would be super convenient if start and endpoints were also accepted. Alternatively, do you have an idea how I could convert my start and end points to percentages?

Fuzzyma commented 3 years ago

SVG only supports percentages as far as I know. There is not much value for your use-case. Just write a function that converts absolute coordinates into percentages. You can even extend svg gradient with it so it feels natural to use