For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/api/elements/built-in/svg.md.
Lynx
  • 简体中文
  • <svg> XElement

    <svg> 是在标记中直接嵌入可缩放矢量图形(SVG)的基础元素。它可以帮助你创建清晰、与分辨率无关的图形,从简单图标到复杂的数据可视化,在不同屏幕尺寸与像素密度下都能无损缩放。

    Lynx SVG 专为高性能的静态渲染而设计。它不会在主线程上为每个 SVG 标签创建独立的元素节点,而是将解析工作交由后台线程处理,并将整个图形作为一个原生视图进行渲染,从而降低主线程的解析耗时和节点数量开销。它覆盖了 17 个最常用的 SVG 标签和超过 40 个属性,能够满足绝大多数实际 SVG 资源的渲染需求。

    使用指南

    基础用法

    下面是 <svg> 的基础用法示例:

    支持的 SVG 标签

    以下 SVG 标签已完全支持:

    标签描述
    circle定义一个圆。
    clipPath定义一个裁剪路径。
    defs可复用定义的容器。
    text定义一个文本元素。
    ellipse定义一个椭圆。
    g对元素进行分组。
    image嵌入栅格图像。
    line定义一条直线。
    linearGradient定义线性渐变。
    path定义一条路径。
    polygon定义由直线边组成的闭合图形。
    polyline定义一系列相连的直线。
    radialGradient定义径向渐变。
    rect定义一个矩形。
    stop定义一个渐变停止点。
    svgSVG 根元素。
    use引用并复用其他位置定义的图形。

    支持的 SVG 属性

    以下属性可应用于上述标签:

    属性描述
    xlink:href资源引用(已废弃,优先使用 href)。
    style内联 CSS 样式。
    pointspolygon/polyline 的点列表。
    offset渐变停止点偏移。
    font-size文本字号。
    id唯一标识符。
    xmlnsXML 命名空间。
    clip-path裁剪路径引用。
    clip-rulefill 与 stroke 的裁剪规则。
    clipPathUnitsclipPath 的单位。
    color前景色。
    cx, cycircle/ellipse 的中心坐标。
    d路径数据。
    fill填充颜色/绘制方式。
    fill-opacity填充透明度。
    fill-rule路径相交时的填充规则。
    fx, fy径向渐变的焦点。
    gradientTransform渐变的变换矩阵。
    gradientUnits渐变的坐标系。
    height, width尺寸。
    href超链接引用(xlink:href 的现代替代)。
    opacity整体透明度。
    preserveAspectRatio缩放时的宽高比行为。
    rcircle 的半径。
    rx, ry圆角矩形的圆角半径。
    spreadMethod渐变超出定义范围时的填充方式。
    stop-color渐变停止点颜色。
    stop-opacity渐变停止点透明度。
    stroke描边颜色/绘制方式。
    stroke-dasharray描边虚线样式。
    stroke-dashoffset虚线偏移量。
    stroke-linecap开放子路径端点的形状。
    stroke-linejoin路径拐角处的连接形状。
    stroke-miterlimit斜接连接(miter join)的限制。
    stroke-opacity描边透明度。
    stroke-width描边宽度。
    transform变换矩阵。
    viewBox坐标系与宽高比。
    x, y位置坐标。
    x1, y1, x2, y2line 的端点坐标。

    属性

    content

    Android
    iOS
    Desktop
    Harmony
    content?: string;

    SVG XML 内容

    src

    Android
    iOS
    Desktop
    Harmony
    src?: string;

    SVG 资源 URL

    事件

    前端可以绑定相应的事件回调来监听元素的运行时行为,如下所示。

    bindload

    Android
    iOS
    Desktop
    Harmony
    bindload = (e: BaseEvent) => {};

    SVG 已加载

    兼容性

    LCD tables only load in the browser

    除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。