【技术专题】HTML5 网页技术 - HTML5 SVG

大家好，我是Java1234_小锋老师，最近更新《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码打包下载：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

HTML5（在第二阶段目录里）

HTML5 SVG

HTML5 SVG 是指在 HTML5 页面中直接使用 SVG（Scalable Vector Graphics，可缩放矢量图形）。SVG 基于 XML，用标签描述图形，而不是像 Canvas 那样用像素绘制。它的最大特点是：矢量、可缩放、可被 CSS 和 JavaScript 操作、支持事件。

1. 在 HTML5 中使用 SVG

最常见的是内联写法：

html 复制代码

<svg width="200" height="120" viewBox="0 0 200 120">
  <rect x="10" y="10" width="80" height="50" fill="skyblue" />
  <circle cx="150" cy="40" r="30" fill="orange" />
</svg>

其他嵌入方式：

html 复制代码

<img src="icon.svg" alt="图标">
<object data="icon.svg" type="image/svg+xml"></object>
<div style="background-image:url(icon.svg)"></div>

内联 SVG 可以被 CSS 和 JS 直接控制；通过 <img> 引入的 SVG 通常不能操作内部元素。

独立 .svg 文件需要命名空间：

html 复制代码

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
</svg>

HTML5 内联时可以省略 xmlns。

2. 坐标系统与 viewBox

SVG 坐标原点在左上角，x 向右，y 向下。

html 复制代码

<svg width="200" height="200" viewBox="0 0 100 100">
</svg>

viewBox="0 0 100 100" 表示内部用户坐标从 (0,0) 到 (100,100)。显示尺寸是 200×200，所以 1 个用户单位等于 2 像素。viewBox 是实现响应式和缩放的核心。

3. 常用形状元素

html 复制代码

<rect x="10" y="10" width="80" height="50" rx="8" />
<circle cx="100" cy="60" r="40" />
<ellipse cx="100" cy="60" rx="50" ry="30" />
<line x1="0" y1="0" x2="100" y2="100" />
<polyline points="0,0 50,30 100,0" />
<polygon points="50,0 100,50 50,100 0,50" />
<path d="M10 10 L90 10 L90 90 Z" />

rect：矩形，rx/ry 圆角
circle：圆，cx/cy/r
ellipse：椭圆，cx/cy/rx/ry
line：直线
polyline：折线，不自动闭合
polygon：多边形，自动闭合
path：最强大的路径

4. 样式与常用属性

SVG 可以用"表现属性"或 CSS 控制：

html 复制代码

<circle cx="50" cy="50" r="40"
        fill="orange"
        stroke="black"
        stroke-width="3"
        opacity="0.8" />

CSS 写法：

html 复制代码

circle {
  fill: orange;
  stroke: black;
  stroke-width: 3;
}

常用属性：

fill：填充色，默认黑色
stroke：描边色，默认无
stroke-width：描边宽度
stroke-linecap：线端样式，如 round
stroke-linejoin：拐角样式
opacity：整体透明度
fill-opacity、stroke-opacity
transform：平移、旋转、缩放

5. path 路径

<path> 用 d 属性描述复杂图形：

html 复制代码

<path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="red" />

常用命令：

M x y：移动到
L x y：画直线到
H x：水平线
V y：垂直线
C：三次贝塞尔曲线
Q：二次贝塞尔曲线
A：圆弧
Z：闭合路径

大写表示绝对坐标，小写表示相对坐标。

6. 分组、复用与文本

用 <g> 分组：

html 复制代码

<g fill="blue" transform="translate(20,20)">
  <rect width="50" height="50" />
  <circle cx="80" cy="25" r="25" />
</g>

用 <defs> 定义可复用元素，用 <use> 引用：

html 复制代码

<defs>
  <circle id="dot" r="10" fill="red" />
</defs>
<use href="#dot" x="20" y="20" />
<use href="#dot" x="60" y="20" />

文本：

html 复制代码

<text x="20" y="40" font-size="24" fill="black">Hello SVG</text>

可以用 <tspan> 分段设置样式。

7. 渐变与动画

渐变定义在 <defs> 中：

html 复制代码

<defs>
  <linearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="blue" />
    <stop offset="100%" stop-color="cyan" />
  </linearGradient>
</defs>
<rect width="100" height="100" fill="url(#grad)" />

动画方式：

CSS 动画：@keyframes + transform
JS 修改属性
SMIL：<animate>、<animateTransform>，但现代项目中 CSS/JS 更常见

8. JavaScript 操作 SVG

内联 SVG 是 DOM 的一部分：

javascript 复制代码

const circle = document.querySelector('circle');
circle.setAttribute('r', 60);
circle.style.fill = 'red';
circle.addEventListener('click', () => {
  alert('点击了圆');
});

动态创建时要用命名空间：

javascript 复制代码

const circle = document.createElementNS(
  'http://www.w3.org/2000/svg',
  'circle'
);
circle.setAttribute('cx', 50);
circle.setAttribute('cy', 50);
circle.setAttribute('r', 20);
svg.appendChild(circle);

9. SVG 与 Canvas 的区别

特性	SVG	Canvas
图形类型	矢量	位图/像素
DOM	每个图形是节点	单个画布
事件	可直接绑定到图形	需要手动命中检测
缩放	不失真	可能模糊
适用	图标、图表、地图、UI	游戏、像素处理、大量绘制

10. 一个完整示例

html 复制代码

<svg width="220" height="140" viewBox="0 0 220 140">
  <defs>
    <linearGradient id="g1" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#4facfe" />
      <stop offset="100%" stop-color="#00f2fe" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="90" height="50" rx="8" fill="url(#g1)" />
  <circle cx="160" cy="35" r="25" fill="#f59e0b" stroke="#333" stroke-width="2" />

  <path d="M10 100 L60 80 L110 110 L160 90"
        fill="none" stroke="#ef4444" stroke-width="3"
        stroke-linecap="round" stroke-linejoin="round" />

  <text x="10" y="130" font-size="14" fill="#333">Hello SVG</text>
</svg>

总结：HTML5 SVG 基础主要掌握内联
、viewBox 坐标系统、基本形状、path、fill/stroke 样式、g/defs/use 复用、CSS/JS 操作。它适合图标、图表、地图和可缩放 UI。

【技术专题】HTML5 网页技术 - HTML5 SVG

视频教程+课件+源码 打包下载 ：

HTML5 SVG

1. 在 HTML5 中使用 SVG

2. 坐标系统与 viewBox

3. 常用形状元素

4. 样式与常用属性

5. path 路径

6. 分组、复用与文本

7. 渐变与动画

8. JavaScript 操作 SVG

9. SVG 与 Canvas 的区别

10. 一个完整示例

视频教程+课件+源码打包下载：