什么是 SVG？

SVG 的全称是可缩放矢量图形。它是一种基于 XML 的矢量图形类型格式。它提供了各种选项来设计不同的形状，例如椭圆、圆形、矩形和线条。 因此，SVG 提供的可视化设计为我们提供了更大的灵活性和力量。

SVG 特性

以下列出了一些SVG特性

• SVG 是基于文本的，它是一种基于矢量的图像格式。
• SVG 与 HTML 结构相同。
• 它可以被描述为DOM（文档对象模型）。
• SVG 的属性可以被描述为特性。
• SVG 必须包含相对于原点位置（0, 0）的绝对位置。
• SVG 可以像在任何 HTML 文档中一样添加。

最小的示例

让我们制作一个 SVG 图像并将其添加到HTML文档中。

步骤 1：制作 SVG 图像。 我们将此图像的高度设置为 400 像素，并将此图像的宽度设置为 400 像素。

上面的<svg>标签开始了 SVG 图像。 它具有高度和宽度作为属性。 SVG 具有默认格式，即像素。

步骤 2：制作一条线，从点 (100, 100) 开始，在点 (200, 100) 结束，并固定线的颜色。

其中，

x1：第一个点的 x 坐标

y1：第一个点的 y 坐标

x2：第二个点的 x 坐标

y2：第二个点的 y 坐标

stroke：线的颜色

stroke-width：线的粗细

步骤 3：制作任何 HTML 文档并将 SVG（如上所述）组合如下

输出

使用 D3.js 的 SVG

要使用D3.js创建 SVG，让我们看一下下面的示例

示例

SVG 容器将采用 SVG 图像。 我们可以借助名为 select() 方法的方法来选择 SVG 容器。 之后，将使用名为 append() 方法的方法注入 SVG 元素。 使用 style() 和 attr() 方法包含样式和属性。

输出

矩形元素

矩形可以通过<rect>来表示，如以下示例所示

示例

属性-

x：矩形左上角点的 x 坐标。

y：矩形左上角点的 y 坐标。

width：它代表矩形的宽度。

height：它代表矩形的高度。

输出

圆形元素

一个圆圈可以用标签 <circle> 表示，如以下示例所示

示例

属性-

cx：圆心点的 x 坐标。

cy：圆心点的 y 坐标。

r：它代表圆的半径。

输出

椭圆元素

它可以用标签 <ellipses> 表示，如以下示例所述

属性-

cx：椭圆中心点的 x 坐标。

cy：椭圆中心点的 y 坐标。

rx：它是圆的 x 半径。

ry：它是圆的 y 半径。

输出