SVG
02-html2026/11/14
SVG (Scalable Vector Graphics) 是基于 XML 的矢量图形格式，可以在不失真的情况下无限缩放。
SVG 基础
1. 基本结构
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- SVG 内容 -->
</svg>
2. 在 HTML 中使用 SVG
<!-- 内联 SVG -->
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red"/>
</svg>
<!-- 作为图片引用 -->
<img src="image.svg" alt="SVG 图片">
<!-- 作为背景图片 -->
<div style="background: url('image.svg');"></div>
<!-- 使用 object 标签 -->
<object data="image.svg" type="image/svg+xml"></object>
基本图形元素
1. 矩形 <rect>
<svg width="300" height="200">
<!-- 基本矩形 -->
<rect x="10" y="10" width="100" height="50" fill="blue"/>
<!-- 圆角矩形 -->
<rect x="150" y="10" width="100" height="50" rx="10" ry="10" fill="green"/>
<!-- 带边框的矩形 -->
<rect x="10" y="80" width="100" height="50" fill="none" stroke="red" stroke-width="3"/>
</svg>
2. 圆形 <circle>
<svg width="300" height="200">
<!-- 实心圆 -->
<circle cx="80" cy="80" r="50" fill="red"/>
<!-- 空心圆 -->
<circle cx="200" cy="80" r="40" fill="none" stroke="blue" stroke-width="5"/>
</svg>
3. 椭圆 <ellipse>
<svg width="300" height="200">
<ellipse cx="150" cy="100" rx="80" ry="40" fill="orange"/>
<ellipse cx="150" cy="100" rx="60" ry="30" fill="yellow"/>
</svg>
4. 线条 <line>
<svg width="300" height="200">
<!-- 水平线 -->
<line x1="50" y1="50" x2="250" y2="50" stroke="black" stroke-width="2"/>
<!-- 斜线 -->
<line x1="50" y1="150" x2="250" y2="100" stroke="red" stroke-width="3"/>
<!-- 虚线 -->
<line x1="50" y1="180" x2="250" y2="180" stroke="blue" stroke-width="2" stroke-dasharray="5,5"/>
</svg>
5. 折线 <polyline>
<svg width="300" height="200">
<polyline points="50,50 100,100 150,50 200,100 250,50"
fill="none"
stroke="green"
stroke-width="3"/>
</svg>
6. 多边形 <polygon>
<svg width="300" height="200">
<!-- 三角形 -->
<polygon points="150,50 100,150 200,150" fill="lightblue"/>
<!-- 五角星 -->
<polygon points="100,10 40,198 190,78 10,78 160,198"
fill="gold"
stroke="orange"
stroke-width="2"/>
</svg>