Can CSS linear gradients have unanchored, independent start and end positions like in SVG gradients?
Below is an example of CSS linear gradient code:
#rectangle {
width: 100%;
height: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(225deg, rgba(255,255,255,1) 0%, rgba(250,0,0,1) 27.59%, rgba(108,22,95,1) 76.35%, rgba(39,32,32,1) 100%)
}<div id="rectangle">
</div>Here is the expected output in a square:
https://i.sstatic.net/6siE7.png
Expected output in a rectangle
https://i.sstatic.net/vV9wd.png
I've been looking at this page on MDN and this page on W3C.
The orientation of the gradient in SVG is defined by x1, x2, y1, and y2 attributes.
The element also takes several other attributes, which specify the size and appearance of the gradient. The orientation of the gradient is controlled by two points, designated by the attributes x1, x2, y1, and y2. These attributes define a line along which the gradient travels. The gradient defaults to a horizontal orientation, but it can be rotated by changing these. Gradient2 in the above example is designed to create a vertical gradient. - from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients
According to other documentation:
X and Y position of the start of the gradient line, as a multiple of the object's bounding box: X=0 indicates the left edge of the bounding box and X=1 indicates the right edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.
There might be issues related to pre-transform/post-transform when dealing with the gradient lines.
In my project, I retrieve the width and height of the square/rectangle, the start and end points (gradient lines), the color stop colors, and the color stop ratios. These gradient lines vary each time.