logo

F2

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

使用 svg 渲染

上一篇
配置 jsx transform
下一篇
自定义 View

Resources

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

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

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

安装依赖

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

定义渲染容器

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

使用 svg renderer

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}>
{...}
</Canvas>
);
const canvas = new Canvas(props);
canvas.render();

演示示例:https://codesandbox.io/s/prod-fire-nk4d8x