mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
1.6 KiB
1.6 KiB
| title | order |
|---|---|
| Gradient Color for Objects | 4 |
In G6, you can set Linear Gradient for stroke and Circular Gradient for filling color.
Linear Gradient for Stroke
Demonstration
lis the flag for linear gradient, the text in green can be modified to satisfy your requirements.
Usage
Assign the stroke as below while Configurating the Node or Edge:
// Using the linear gradient for the stroke. The gradient angle is 0, and the begin color is #ffffff, the color of the midpoint is #7ec2f3, and the end color is #1890ff
stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
Circular Gradient for Fill
Demonstration
ris the flag for circular gradient, the text in green can be modified to satisfy your requirements. Thexyandrare the relative values and range from 0 to 1.
Usage
Assign the fill as below while Configurating the Node or Edge:
// Using the radial gradient for filling color. The center of the circular gradient is the center of the filled shape's bbox(bounding box). The radius is equal to 0.1 multiples the length of the diagonal of the bbox. The begin color is #ffffff, the color of the midpoint is #7ec2f3, and the end color is #1890ff
fill: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff'