RenderingVideo 文档

SVG 元素

渲染 inline SVG 或远程 SVG 文件

SVG 元素

svg 元素用于渲染 inline SVG,适合 logo、矢量插画和简单图形组合。

结构

interface SvgClip extends BaseClip {
  type: "svg";
  svg?: string | { $ref: string };
  src?: string | { $ref: string };
}

字段

  • svg:inline SVG 字符串,或引用 assets.svgs[].svg
  • src:远程或资产引用的 SVG 文件地址。当前会按图片方式渲染,适合只展示、不需要拆分 SVG 子节点动画的场景。

如果需要可动画路径,请使用独立的 pathline 元素。

assets

{
  "assets": {
    "svgs": [
      {
        "id": "logo",
        "svg": "<svg viewBox=\"0 0 100 100\">...</svg>"
      }
    ]
  }
}

示例

{
  "type": "svg",
  "start": 0,
  "duration": 4,
  "svg": { "$ref": "logo" },
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": 320,
    "height": 320
  },
  "animations": [
    {
      "type": "rotate",
      "from": -8,
      "to": 8,
      "duration": 1.6,
      "loop": true
    }
  ]
}