当前位置：首页 > news >正文

图形库的基础--svg

news 2025/9/22 17:22:44

文章目录

前言
根标签
常用图形标签
简单实例

前言

svg是矢量图，由数学路径描述，实时计算，无论放大多少倍都会保持清晰

svg是常用的ECharts、Chart.js的基础

根标签

<svg>
主要属性有：
width/height：设置 SVG 的尺寸
viewBox：定义 “可视区域”，格式为x y width height（关键属性，决定图形的缩放比例）；
xmlns：XML 命名空间，固定值http://www.w3.org/2000/svg（确保浏览器识别为 SVG）。
2.

常用图形标签

矩形：<rect>

核心属性：
x/y：矩形左上角的坐标；
width/height：矩形的宽和高；
rx/ry：圆角的半径（值越大，圆角越明显）；
fill：填充色（可写颜色名、十六进制、RGB）；
stroke：边框色；
stroke-width：边框宽度。

圆形:

核心属性：
cx/cy：圆心的坐标；
r：圆的半径。

路径：
<path>能绘制任何图形，核心属性是d。
举例：

<path d="M100,40 C140,0 200,60 200,120 C200,170 120,200 100,180 C80,200 0,170 0,120 C0,60 60,0 100,40 Z">

M100,40 Move to (100,40)——落笔起点
C140,0 200,60 200,120 Cubic Bézier——从当前点画一条 3 次贝塞尔曲线到 (200,120)，控制点1 (140,0)，控制点2 (200,60)
C200,170 120,200 100,180 继续 C 指令：到 (100,180)，控制点 (200,170) 和 (120,200)
C80,200 0,170 0,120 再到 (0,120)，控制点 (80,200) 和 (0,170)
C0,60 60,0 100,40 回到起点附近 (100,40)，控制点 (0,60) 和 (60,0)
Z close path——把最后一点与最初 M 点连起来，形成封闭区域

涉及较多数学内容，不需要充分了解

可以通过svg绘图后再将其命令复制导入网页

简单实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>text {stroke-width: 10;white-space-collapse: preserve;text-wrap-mode: nowrap;text-anchor: start;font-size: 200;stroke: rgb(0, 0, 0);fill: rgb(0, 0, 0);
}</style>
</head>
<body><text xmlns="http://www.w3.org/2000/svg" transform="rotate(-0.244677 359.734 275.333)" stroke-width="10" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="200" id="svg_1" y="362.66666" x="235.33333" stroke="#000" fill="#000000">3G</text>
</body>
</html>