@antv/g-svg

What is @antv/g-svg?

@antv/g-svg is a package that provides a set of tools for creating and manipulating SVG (Scalable Vector Graphics) elements. It is part of the AntV ecosystem, which is a suite of data visualization tools. This package allows developers to create complex SVG graphics programmatically, making it easier to build custom visualizations and graphical interfaces.

What are @antv/g-svg's main functionalities?

Creating SVG Elements

This feature allows you to create and manipulate basic SVG elements like rectangles, circles, and lines. The code sample demonstrates how to create a rectangle and add it to a group, which is then rendered using the SVGRenderer.

const { SVGRenderer, Group, Rect } = require('@antv/g-svg');
const renderer = new SVGRenderer();
const group = new Group();
const rect = new Rect({
  attrs: {
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: 'red'
  }
});
group.add(rect);
renderer.draw(group);

Transformations

This feature allows you to apply transformations to SVG elements, such as translation, rotation, and scaling. The code sample demonstrates how to translate, rotate, and scale a rectangle.

const { Rect } = require('@antv/g-svg');
const rect = new Rect({
  attrs: {
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: 'blue'
  }
});
rect.translate(50, 50);
rect.rotate(45);
rect.scale(1.5, 1.5);

Event Handling

This feature allows you to attach event listeners to SVG elements. The code sample demonstrates how to attach a click event listener to a rectangle.

const { Rect } = require('@antv/g-svg');
const rect = new Rect({
  attrs: {
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: 'green'
  }
});
rect.on('click', () => {
  console.log('Rectangle clicked!');
});

Other packages similar to @antv/g-svg

svg.js

svg.js is a lightweight library for manipulating and animating SVG. It provides a simple API for creating and transforming SVG elements. Compared to @antv/g-svg, svg.js is more focused on simplicity and ease of use, making it a good choice for smaller projects or when you need quick prototyping.

README