BaseSVG

专为 SVG 类型的节点打造。继承自 sd.SD2DNode。这是一个抽象类，不应该被实例化。

API 列表

class BaseSVG extends SD2DNode {
    constructor(target: SDNode | RenderNode, tag: string);

    fill(): HexColor;
    fill(fill: SDColor): this;
    fillOpacity(): number;
    fillOpacity(opacity: number): this;
    stroke(): HexColor;
    stroke(stroke: SDColor): this;
    strokeOpacity(): number;
    strokeOpacity(opacity: number): this;
    strokeWidth(): number;
    strokeWidth(width: number): this;
    strokeDashArray(): Array<number>;
    strokeDashArray(array: Array<number>): this;
    strokeDashOffset(): number;
    strokeDashOffset(offset: number): this;
    color(): PacketColor;
    color(color: SDColor): this;
}

fill

class BaseSVG {
    fill(): HexColor;
    fill(fill: SDColor): this;
}

用于管理 SVG 元素的填充色。默认为白色。

fillOpacity

class BaseSVG {
    fillOpacity(): number;
    fillOpacity(opacity: number): this;
}

用于管理 SVG 元素的填充透明度。默认为 1。

stroke

class BaseSVG {
    stroke(): HexColor;
    stroke(stroke: SDColor): this;
}

用于管理 SVG 元素的边框色。默认为黑色。

strokeOpacity

class BaseSVG {
    strokeOpacity(): number;
    strokeOpacity(opacity: number): this;
}

用于管理 SVG 元素的边框透明度。默认为 1。

strokeWidth

class BaseSVG {
    strokeWidth(): number;
    strokeWidth(width: number): this;
}

用于管理 SVG 元素的边框宽度。默认为 1。

strokeDashArray & strokeDashOffset

class BaseSVG {
    strokeDashArray(): Array<number>; // 获取 strokeDashArray 属性
    strokeDashArray(array: Array<number>): this; // 设置 strokeDashArray 属性
    strokeDashOffset(): number; // 获取 strokeDashOffset 属性
    strokeDashOffset(offset: number): this; // 设置 strokeDashOffset 属性
}

我们可以把边框样式定义为虚线，而这两个方法可以控制虚线的样式具体是怎么样的。其中，strokeDashArray 定义了边框的虚线段和间隙的排列形式，strokeDashOffset 则定义了虚线和路径起点的偏移量。

const svg = sd.svg();
const div = sd.div();
const rect = new sd.Rect(svg); // 默认情况下 rect 的长宽均为 40
const slider = new sd.Slider(div).min(-20).max(20).value(0);
slider.onChange(value => {
    sd.inter(async () => {
        rect.startAnimate().strokeDashOffset(value).endAnimate();
    });
});
sd.main(async () => {
    await sd.pause(sd.CONTINUE_FRAME);
    rect.startAnimate().strokeDashArray([10, 10]).endAnimate(); // 虚线长 10，间隙长 10
    await sd.pause(sd.CONTINUE_FRAME);
    rect.startAnimate().strokeDashArray([15, 5]).endAnimate(); // 虚线长 15，间隙长 5
    await sd.pause(sd.CONTINUE_FRAME);
    rect.startAnimate().strokeDashArray([15, 5, 5, 15]).endAnimate(); // 第一段中，虚线长 15，间隙长 5；第二段中，虚线长 5，间隙长 15；两段交替出现
    await sd.pause(sd.CONTINUE_FRAME);
    rect.startAnimate().strokeDashArray([80, 80]).endAnimate();
});

试一试，先感受一下 strokeDashArray 是如何影响矩形的边框样式的，再感受一下 strokeDashOffset 是如何影响矩形的边框样式的。

有关这两个属性的更详细的说明可以参考以下两篇文档：strokeDashArray、strokeDashOffset。

可以用这两个属性玩出一些有趣的效果，例如，我们希望让一个矩形浮现出来，则可以这样做：

const svg = sd.svg();
const rect = new sd.Rect(svg).strokeDashArray([160, 160]).strokeDashOffset(-160);
sd.main(async () => {
    await sd.pause();
    rect.startAnimate().strokeDashOffset(0).endAnimate();
});

试一试，通过 strokeDashArray 和 strokeDashOffset，控制矩形的边框平滑地出现。