Creates a linear gradient between 2 colors.
Properties
Property | Default | Notes |
|---|---|---|
x1 | |
|
y1 | |
|
x2 | |
|
y2 | |
|
color1 | |
|
color2 | |
|
cycle | |
|
stretch | | Scales the gradient to fit the Shape's bounds |
fit | | Scales the gradient retaining the aspect ratio |
Examples
4 rectangles, each one with a diagonal gradient
| Code Block |
|---|
rect( x: 0, y: 0, width: 100, height: 100 ){
gradientPaint( x1: 0, y1: 0, x2: 50, y2: 50 )
}
rect( x: 100, y: 0, width: 100, height: 100 ){
gradientPaint( x1: 50, y1: 0, x2: 0, y2: 50 )
}
rect( x: 0, y: 100, width: 100, height: 100 ){
gradientPaint( x1: 0, y1: 50, x2: 50, y2: 0 )
}
rect( x: 100, y: 100, width: 100, height: 100 ){
gradientPaint( x1: 50, y1: 50, x2: 0, y2: 0 )
}
|
Different settings for fit, stretch and cycle
| Code Block |
|---|
gradientPaint( id: 'g1', x1: 0, y1: 0, x2: 50, y2: 50 ) rect( x: 0, y: 0, width: 100, height: 100, fill: g1 ) circle( cx: 150, cy: 50, radius: 50, fill: g1 ) rect( x: 0, y: 100, width: 200, height: 100, fill: g1 ) |
| |
| |
