HTML SVG与矢量图形

SVG是矢量图形标准，支持无损缩放、CSS样式和JavaScript交互。

SVG嵌入方式

内联SVG

HTML

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

img标签引用

HTML

<img src="icon.svg" alt="图标" width="50" height="50">

CSS背景

CSS

.icon {
  background-image: url('icon.svg');
  background-size: contain;
}

嵌入方式对比

方式	样式控制	JS交互	适用场景
内联	CSS可控	支持	动态图形、图标
img	不可控	不支持	静态图片
CSS背景	不可控	不支持	装饰图案
object	部分可控	有限	独立SVG文件

基本图形元素

矩形

HTML

<rect x="10" y="10" width="80" height="60" rx="5" fill="#336699"/>

圆形

HTML

<circle cx="50" cy="50" r="40" fill="orange"/>

椭圆

HTML

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

线条

HTML

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

折线

HTML

<polyline points="0,0 50,50 100,25" fill="none" stroke="red"/>

多边形

HTML

<polygon points="50,0 100,50 50,100 0,50" fill="purple"/>

路径

HTML

<path d="M10,10 L90,10 L50,90 Z" fill="teal"/>

path路径详解

路径命令

命令	说明	示例
M	移动到	M10,20
L	直线到	L50,60
H	水平线	H80
V	垂直线	V40
C	三次贝塞尔	C20,20 80,20 50,50
S	平滑三次贝塞尔	S80,80 100,50
Q	二次贝塞尔	Q50,0 50,50
T	平滑二次贝塞尔	T100,50
A	弧线	A30,30 0 1,1 100,50
Z	闭合路径	Z

大写为绝对坐标，小写为相对坐标。

路径示例

HTML

<!-- 心形 -->
<path d="M50,30 C20,0 0,30 50,70 C100,30 80,0 50,30" fill="red"/>

<!-- 箭头 -->
<path d="M10,25 L40,25 L40,10 L70,30 L40,50 L40,35 L10,35 Z" fill="#333"/>

渐变

线性渐变

HTML

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ff0000"/>
    <stop offset="100%" stop-color="#0000ff"/>
  </linearGradient>
</defs>
<rect width="100" height="50" fill="url(#grad1)"/>

径向渐变

HTML

<defs>
  <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="white"/>
    <stop offset="100%" stop-color="black"/>
  </radialGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad2)"/>

滤镜效果

模糊

HTML

<defs>
  <filter id="blur">
    <feGaussianBlur stdDeviation="3"/>
  </filter>
</defs>
<circle cx="50" cy="50" r="30" fill="blue" filter="url(#blur)"/>

阴影

HTML

<defs>
  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
  </filter>
</defs>
<rect width="80" height="50" fill="white" filter="url(#shadow)"/>

动画

SMIL动画

HTML

<circle cx="50" cy="50" r="20" fill="orange">
  <animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
  <animate attributeName="fill" values="orange;red;orange" dur="2s" repeatCount="indefinite"/>
</circle>

CSS动画

HTML

<style>
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  svg.icon { animation: rotate 2s linear infinite; }
</style>
<svg class="icon" width="50" height="50">
  <rect width="50" height="50" fill="blue"/>
</svg>

JavaScript动画

JavaScript

const circle = document.querySelector('circle');
let r = 20;
setInterval(() => {
  r = r >= 40 ? 20 : r + 1;
  circle.setAttribute('r', r);
}, 50);

viewBox与坐标系统

HTML

<svg width="100" height="100" viewBox="0 0 200 200">
  <!-- viewBox定义内部坐标系统，width/height定义显示尺寸 -->
</svg>

viewBox: "min-x min-y width height" 定义SVG内部坐标
preserveAspectRatio: 控制viewBox如何适配viewport

HTML

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <!-- meet: 保持比例，slice: 裁剪填充 -->
</svg>

SVG与Canvas对比

特性	SVG	Canvas
类型	矢量	位图
缩放	无损	有损
DOM	可访问	不可访问
事件	原生支持	需手动计算
性能	大量元素差	大量绘制好
适用	图标、图表	游戏、图像处理

要点总结

内联SVG可被CSS样式化和JS操作
path是最强大的图形元素
渐变和滤镜定义在defs中
viewBox控制内部坐标系统
三种动画方式：SMIL、CSS、JavaScript
图标/图表用SVG，游戏/图像处理用Canvas

📝 发现内容有误？点击此处直接编辑