求助：文本渐变色无法起作用

[alphabetabc]

代码如下

const text = new Text({
    style: {
        text: `两种渐变都有一个叫做 gradientUnits（渐变单元）的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：userSpaceOnUse 、objectBoundingBox。默认值为 objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从 0 到 1 的坐标值，渐变就会自动的缩放到对象相同大小。userSpaceOnUse 使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。在每个.shp,.shx与.dbf文件之中，图形在每个文件的排序是一致的。也就是说，.shp的第一条记录与.shx及.dbf之中的第一条记录相对应，如此类推。此外，在.shp与.shx之中，有许多字段的字节序是不一样的。因此用户在编写读取这些文件格式的程序时，必须十分小心地处理不同文件的不同字节序。`,
        x: 0,
        dy: 10,
        textBaseline: 'top',
        wordWrap: true,
        wordWrapWidth: 800,
        fill: 'linear-gradient(90deg, red 0%, green 100%)',
    },
});

await canvas.ready;
canvas.appendChild(text);

下面的效果是换成svg之后的效果

[alphabetabc]

textBaseline: 'bottom' 的时候 渐变色也不好用，有点摸不准这块了

[alphabetabc]

升级到最新版的G，依然有问题

import { Circle, Canvas, Text, Group } from "@antv/g";
// import { Renderer } from "@antv/g-canvas";
import { Renderer } from "@antv/g-svg";
// import { Renderer } from "@antv/g-webgl";

/**
 * canvas实现无法使用文字渐变色
 */

// create a canvas
const canvas = new Canvas({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    renderer: new Renderer(), // select a renderer
});

// create a circle
const circle = new Circle({
    style: {
        cx: 100,
        cy: 100,
        r: 50,
        fill: "linear-gradient(90deg, green, red)",
        stroke: "blue",
        lineWidth: 5,
        cursor: "pointer",
    },
});

const text = new Text({
    style: {
        text: `两种渐变都有一个叫做 gradientUnits（渐变单元）的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：userSpaceOnUse 、objectBoundingBox。默认值为 objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从 0 到 1 的坐标值，渐变就会自动的缩放到对象相同大小。userSpaceOnUse 使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。在每个.shp,.shx与.dbf文件之中，图形在每个文件的排序是一致的。也就是说，.shp的第一条记录与.shx及.dbf之中的第一条记录相对应，如此类推。此外，在.shp与.shx之中，有许多字段的字节序是不一样的。因此用户在编写读取这些文件格式的程序时，必须十分小心地处理不同文件的不同字节序。`,
        x: 0,
        // dy: 0,
        textBaseline: "top",
        wordWrap: true,
        wordWrapWidth: 800,
        // fill: "linear-gradient(90deg, red 0%, green 100%)",
        fill: "linear-gradient(90deg, green, red)",
        // fill: "red",
        fillOpacity: 1,
    },
});

const g1 = new Group();
g1.append(text);

/**
 * 此处渐变不好使
 */
const text2 = new Text({
    style: {
        text: `两种渐变都有一个叫做 gradientUnits（渐变单元）的属性，它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值：userSpaceOnUse 、objectBoundingBox。默认值为 objectBoundingBox，我们目前看到的效果都是在这种系统下的，它大体上定义了对象的渐变大小范围，所以你只要指定从 0 到 1 的坐标值，渐变就会自动的缩放到对象相同大小。userSpaceOnUse 使用绝对单元，所以你必须知道对象的位置，并将渐变放在同样地位置上。在每个.shp,.shx与.dbf文件之中，图形在每个文件的排序是一致的。也就是说，.shp的第一条记录与.shx及.dbf之中的第一条记录相对应，如此类推。此外，在.shp与.shx之中，有许多字段的字节序是不一样的。因此用户在编写读取这些文件格式的程序时，必须十分小心地处理不同文件的不同字节序。`,
        x: 0,
        y: 250,
        textBaseline: "top",
        wordWrap: true,
        wordWrapWidth: 800,
        fill: "linear-gradient(90deg, green, red)",
        // fill: 'red',
        fillOpacity: 1,
    },
});

console.log(text);

await canvas.ready;

// append to canvas
canvas.appendChild(circle);
canvas.appendChild(g1);
canvas.appendChild(text2);

• svg 显示有问题
• canvas 文字都不显示
  

[xiaoiver]

正确效果如下：

[xiaoiver]

升级到 @antv/g@6.0.7 和 @antv/g-canvas@2.0.6 即可，例子可以参考：https://github.com/antvis/G/blob/next/__tests__/demos/bugfix/1572.ts