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

【HTML】SVG标签的使用方式

article 2025/2/27 23:10:23

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，广泛用于网页和应用程序中。以下是 SVG 标签的详细使用教程，涵盖基本形状、路径、文本、渐变、动画等内容。

1. SVG 基础结构

SVG 图形需要放在 <svg> 标签中，并指定宽度和高度。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG 内容 -->
</svg>

width 和 height：定义 SVG 画布的大小。
xmlns：指定 SVG 的命名空间。

2. 基本形状

SVG 支持多种基本形状，如矩形、圆形、椭圆、线条和多边形。

矩形 (`<rect>`)

<rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="2" />

x 和 y：矩形左上角的坐标。
width 和 height：矩形的宽度和高度。
fill：填充颜色。
stroke：边框颜色。
stroke-width：边框宽度。

圆形 (`<circle>`)

<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" />

cx 和 cy：圆心的坐标。
r：半径。

椭圆 (`<ellipse>`)

<ellipse cx="100" cy="50" rx="80" ry="30" fill="green" />

cx 和 cy：椭圆中心的坐标。
rx 和 ry：椭圆的水平半径和垂直半径。

线条 (`<line>`)

<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />

x1 和 y1：起点坐标。
x2 和 y2：终点坐标。

多边形 (`<polygon>`)

<polygon points="50,5 100,50 50,95 5,50" fill="yellow" stroke="black" stroke-width="2" />

points：多边形的顶点坐标，格式为 x1,y1 x2,y2 x3,y3 ...。

3. 路径 (`<path>`)

<path> 是 SVG 中最强大的元素，可以绘制任意形状。

<path d="M10 10 L100 100 Q150 50 200 100 Z" fill="none" stroke="black" stroke-width="2" />

d：定义路径的命令。
- M：移动到某个点。
- L：画一条直线。
- Q：画二次贝塞尔曲线。
- Z：闭合路径。

4. 文本 (`<text>`)

SVG 支持在图形中添加文本。

<text x="10" y="50" font-family="Arial" font-size="20" fill="black">Hello SVG!</text>

x 和 y：文本的起始坐标。
font-family：字体。
font-size：字体大小。
fill：文本颜色。

5. 渐变

SVG 支持线性渐变和径向渐变。

线性渐变 (`<linearGradient>`)

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:red;stop-opacity:1" />
    <stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
  </linearGradient>
</defs>
<rect x="10" y="10" width="100" height="50" fill="url(#grad1)" />

x1, y1, x2, y2：定义渐变的方向。
stop：定义渐变的颜色和位置。

径向渐变 (`<radialGradient>`)

<defs>
  <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
    <stop offset="100%" style="stop-color:white;stop-opacity:1" />
  </radialGradient>
</defs>
<circle cx="100" cy="100" r="50" fill="url(#grad2)" />

6. 动画 (`<animate>`)

SVG 支持通过 <animate> 标签实现动画效果。

<circle cx="50" cy="50" r="20" fill="red">
  <animate attributeName="cx" from="50" to="200" dur="2s" repeatCount="indefinite" />
</circle>

attributeName：需要动画的属性。
from 和 to：属性的起始值和结束值。
dur：动画持续时间。
repeatCount：动画重复次数。

7. 分组 (`<g>`)

<g> 标签用于将多个元素分组，方便统一操作。

<g transform="translate(50,50)">
  <rect x="0" y="0" width="50" height="50" fill="blue" />
  <circle cx="25" cy="25" r="10" fill="red" />
</g>

transform：对组内的所有元素应用变换（如平移、旋转、缩放等）。

8. 嵌入外部 SVG

可以通过 <use> 标签复用已有的 SVG 元素。

<defs>
  <circle id="myCircle" cx="50" cy="50" r="40" fill="green" />
</defs>
<use xlink:href="#myCircle" x="100" y="0" />

9. SVG 与 CSS

SVG 可以与 CSS 结合使用，实现更复杂的样式和动画。

<style>
  .myRect {
    fill: orange;
    stroke: black;
    stroke-width: 2;
  }
  .myRect:hover {
    fill: red;
  }
</style>
<rect class="myRect" x="10" y="10" width="100" height="50" />

10. SVG 与 JavaScript

SVG 可以通过 JavaScript 动态操作。

<svg width="200" height="200">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>
<script>
  document.getElementById('myCircle').addEventListener('click', function() {
    this.setAttribute('fill', 'red');
  });
</script>