logo

F2

  • 教程
  • 组件API
  • 图表示例
  • 所有产品antv logo arrow
  • 5.10.0
  • 快速上手
  • 核心概念
  • 图形语法
  • 数据处理
  • 度量
  • 坐标系
  • 图形标签 - Shape
  • 绘图属性 - Style
  • 动画属性 - Animation
  • 事件属性 - Event
  • 图形使用 - JSX
  • 自定义组件
  • 多端/框架 - Framework
    • 多端适配
    • 如何在 React 中使用
    • 如何在 Vue 中使用
    • 如何在小程序中使用
    • 如何在 Node.js 中使用
    • 配置 JSX Transform
    • 使用 SVG 渲染
  • 进阶 - Advanced
    • 自定义 View
  • 常见问题 - Question
    • 和 React 同时使用时,TS 类型报错

使用 SVG 渲染

上一篇
配置 JSX Transform
下一篇
自定义 View

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库
WeaveFox-前端智能研发

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
weavefoxWeaveFox-智能研发技术社区

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
weavefoxWeaveFox-前端智能研发
© Copyright 2026 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

借助 G 的 渲染器,F2 也可以使用 SVG 渲染。

安装依赖

npm install @antv/g-mobile-svg --save

使用步骤

1. 定义渲染容器

<div id="container"></div>

2. 使用 SVG 渲染器

import { Canvas, Chart, Interval, jsx, Axis } from '@antv/f2';
import { Renderer } from '@antv/g-mobile-svg';
const container = document.getElementById('container');
// 实例化 SVG 渲染器
const renderer = new Renderer();
const { props } = (
// 声明渲染容器和渲染器
<Canvas container={container} renderer={renderer} width={300} height={200}>
<Chart data={data}>
<Axis field="genre" />
<Axis field="sold" />
<Interval x="genre" y="sold" color="genre" />
</Chart>
</Canvas>
);
const canvas = new Canvas(props);
canvas.render();

完整示例

CodeSandbox 示例

说明

  • SVG 渲染器适用于需要矢量输出或可缩放图表的场景
  • 通过 renderer 属性将 SVG 渲染器传递给 Canvas 组件
  • SVG 渲染器会生成 SVG DOM 元素,可以方便地进行后续操作(如导出 SVG 文件)