Image

继承自 sd.BaseSVG，封装了 image 这种 SVG 元素。

API 列表

type ApsectRatio = 
    "XMinYMin meet" |
    "XMinYMin slice" | 
    "XMinYMid meet" | 
    "XMinYMid slice" | 
    "XMinYMax meet" | 
    "XMinYMax slice" | 
    "XMidYMin meet" | 
    "XMidYMin slice" | 
    "XMidYMid meet" | 
    "XMidYMid slice" | 
    "XMidYMax meet" | 
    "XMidYMax slice" | 
    "XMaxYMin meet" | 
    "XMaxYMin slice" | 
    "XMaxYMid meet" | 
    "XMaxYMid slice" | 
    "XMaxYMax meet" | 
    "XMaxYMax slice";

class Image extends BaseSVG {
    constructor(target: SDNode | RenderNode);

    href(): string;
    href(href: string): void;
    aspectRatio(): string;
    aspectRatio(aspectRatio: ApsectRatio): this;
}

href

class Image {
    href(): string;
    href(href: string): void;
}

用于管理图片的 URL。对于这个属性做插值是无效的。

const svg = sd.svg();
const img1 = new sd.Image(svg).href("/img/gift.png");
const img2 = new sd.Image(svg).href("/img/gift.png").x(50);
sd.main(async () => {
    await sd.pause();
    img1.href("/img/snowflake.png");
    img2.startAnimate().href("/img/snowflake.png").endAnimate();
});

试一试，img1 和 img2 先后切换了图片，但 img2 切换图片时并没有动画效果。将该属性的修改放在动画编排中，仅仅是导致修改延后了。如果画一张图来表示时序的话，大概是这样的：
       0                  300
       |-------------------|
img1   |
     change

img2   |---change action---|
                         change
对于 img2 而言，它确实发起了一个长达 300ms 的 change action，但由于对这种属性是无法进行插值的，所以修改只在 change action 最后一刻产生。

aspectRatio

不太重要，几乎不会用到。不过还是留下一份参考文档：preserveAspectRatio。