Search K
Appearance
8.5 SVG实践项目
关键词
SVG实践、图表制作、图标设计、插图创作、数据可视化、界面设计、项目应用
学习目标
- 掌握SVG在实际项目中的应用
- 学会创建数据可视化图表
- 能够设计和制作SVG图标
- 掌握SVG插图和界面元素的创作
- 理解SVG在响应式设计中的应用
详细内容
8.5.1 数据可视化图表
柱状图制作
创建交互式柱状图：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG柱状图</title>
</head>
<body>
<h1>SVG数据可视化 - 柱状图</h1>
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg"
role="img" aria-labelledby="chart-title" aria-describedby="chart-desc">
<!-- 图表标题和描述 -->
<title id="chart-title">2023年季度销售数据</title>
<desc id="chart-desc">展示2023年四个季度的销售数据对比，包括产品A、B、C的销售情况</desc>
<!-- 定义渐变和样式 -->
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4CAF50"/>
<stop offset="100%" style="stop-color:#2E7D32"/>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2196F3"/>
<stop offset="100%" style="stop-color:#1565C0"/>
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF9800"/>
<stop offset="100%" style="stop-color:#E65100"/>
</linearGradient>
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="rgba(0,0,0,0.3)"/>
</filter>
</defs>
<!-- 背景网格 -->
<g stroke="#E0E0E0" stroke-width="1" fill="none">
<line x1="100" y1="80" x2="100" y2="380"/>
<line x1="100" y1="380" x2="700" y2="380"/>
<!-- 水平网格线 -->
<line x1="100" y1="320" x2="700" y2="320"/>
<line x1="100" y1="260" x2="700" y2="260"/>
<line x1="100" y1="200" x2="700" y2="200"/>
<line x1="100" y1="140" x2="700" y2="140"/>
<line x1="100" y1="80" x2="700" y2="80"/>
</g>
<!-- 数据柱 -->
<g role="group" aria-label="第一季度数据">
<!-- Q1 数据 -->
<rect x="120" y="200" width="40" height="180" fill="url(#grad1)" filter="url(#shadow)"
aria-label="产品A第一季度销售额180万"/>
<rect x="170" y="260" width="40" height="120" fill="url(#grad2)" filter="url(#shadow)"
aria-label="产品B第一季度销售额120万"/>
<rect x="220" y="320" width="40" height="60" fill="url(#grad3)" filter="url(#shadow)"
aria-label="产品C第一季度销售额60万"/>
<text x="190" y="400" font-family="Arial" font-size="14" text-anchor="middle">Q1</text>
</g>
<g role="group" aria-label="第二季度数据">
<!-- Q2 数据 -->
<rect x="280" y="140" width="40" height="240" fill="url(#grad1)" filter="url(#shadow)"
aria-label="产品A第二季度销售额240万"/>
<rect x="330" y="200" width="40" height="180" fill="url(#grad2)" filter="url(#shadow)"
aria-label="产品B第二季度销售额180万"/>
<rect x="380" y="280" width="40" height="100" fill="url(#grad3)" filter="url(#shadow)"
aria-label="产品C第二季度销售额100万"/>
<text x="350" y="400" font-family="Arial" font-size="14" text-anchor="middle">Q2</text>
</g>
<g role="group" aria-label="第三季度数据">
<!-- Q3 数据 -->
<rect x="440" y="120" width="40" height="260" fill="url(#grad1)" filter="url(#shadow)"
aria-label="产品A第三季度销售额260万"/>
<rect x="490" y="180" width="40" height="200" fill="url(#grad2)" filter="url(#shadow)"
aria-label="产品B第三季度销售额200万"/>
<rect x="540" y="240" width="40" height="140" fill="url(#grad3)" filter="url(#shadow)"
aria-label="产品C第三季度销售额140万"/>
<text x="510" y="400" font-family="Arial" font-size="14" text-anchor="middle">Q3</text>
</g>
<g role="group" aria-label="第四季度数据">
<!-- Q4 数据 -->
<rect x="600" y="160" width="40" height="220" fill="url(#grad1)" filter="url(#shadow)"
aria-label="产品A第四季度销售额220万"/>
<rect x="650" y="220" width="40" height="160" fill="url(#grad2)" filter="url(#shadow)"
aria-label="产品B第四季度销售额160万"/>
<rect x="700" y="300" width="40" height="80" fill="url(#grad3)" filter="url(#shadow)"
aria-label="产品C第四季度销售额80万"/>
<text x="670" y="400" font-family="Arial" font-size="14" text-anchor="middle">Q4</text>
</g>
<!-- 坐标轴标签 -->
<text x="400" y="440" font-family="Arial" font-size="16" text-anchor="middle" font-weight="bold">季度</text>
<text x="40" y="230" font-family="Arial" font-size="16" text-anchor="middle"
transform="rotate(-90 40 230)" font-weight="bold">销售额(万元)</text>
<!-- 数值标签 -->
<g font-family="Arial" font-size="12" fill="#666">
<text x="90" y="385" text-anchor="end">0</text>
<text x="90" y="325" text-anchor="end">100</text>
<text x="90" y="265" text-anchor="end">200</text>
<text x="90" y="205" text-anchor="end">300</text>
<text x="90" y="145" text-anchor="end">400</text>
<text x="90" y="85" text-anchor="end">500</text>
</g>
<!-- 图例 -->
<g role="group" aria-label="图例">
<rect x="520" y="40" width="15" height="15" fill="url(#grad1)"/>
<text x="545" y="52" font-family="Arial" font-size="12">产品A</text>
<rect x="590" y="40" width="15" height="15" fill="url(#grad2)"/>
<text x="615" y="52" font-family="Arial" font-size="12">产品B</text>
<rect x="660" y="40" width="15" height="15" fill="url(#grad3)"/>
<text x="685" y="52" font-family="Arial" font-size="12">产品C</text>
</g>
<!-- 主标题 -->
<text x="400" y="30" font-family="Arial" font-size="20" text-anchor="middle" font-weight="bold">
2023年季度销售数据对比
</text>
</svg>
</body>
</html>饼图制作
创建比例饼图：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG饼图</title>
</head>
<body>
<h1>SVG数据可视化 - 饼图</h1>
<svg width="600" height="500" xmlns="http://www.w3.org/2000/svg"
role="img" aria-labelledby="pie-title" aria-describedby="pie-desc">
<title id="pie-title">市场份额分布</title>
<desc id="pie-desc">显示不同产品在市场中的份额占比</desc>
<!-- 定义渐变 -->
<defs>
<radialGradient id="pieGrad1" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#FF6B6B"/>
<stop offset="100%" style="stop-color:#D63031"/>
</radialGradient>
<radialGradient id="pieGrad2" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#4ECDC4"/>
<stop offset="100%" style="stop-color:#00B894"/>
</radialGradient>
<radialGradient id="pieGrad3" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#45B7D1"/>
<stop offset="100%" style="stop-color:#0984E3"/>
</radialGradient>
<radialGradient id="pieGrad4" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#96CEB4"/>
<stop offset="100%" style="stop-color:#55A3FF"/>
</radialGradient>
<radialGradient id="pieGrad5" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:#FECA57"/>
<stop offset="100%" style="stop-color:#FF9F43"/>
</radialGradient>
<filter id="pieShadow">
<feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="rgba(0,0,0,0.3)"/>
</filter>
</defs>
<!-- 饼图扇形 -->
<g transform="translate(250,250)" role="group" aria-label="饼图数据">
<!-- 产品A: 35% -->
<path d="M 0 0 L 0 -120 A 120 120 0 0 1 84.85 -84.85 Z"
fill="url(#pieGrad1)" filter="url(#pieShadow)"
aria-label="产品A占比35%"/>
<!-- 产品B: 25% -->
<path d="M 0 0 L 84.85 -84.85 A 120 120 0 0 1 120 0 Z"
fill="url(#pieGrad2)" filter="url(#pieShadow)"
aria-label="产品B占比25%"/>
<!-- 产品C: 20% -->
<path d="M 0 0 L 120 0 A 120 120 0 0 1 37.08 113.58 Z"
fill="url(#pieGrad3)" filter="url(#pieShadow)"
aria-label="产品C占比20%"/>
<!-- 产品D: 15% -->
<path d="M 0 0 L 37.08 113.58 A 120 120 0 0 1 -76.64 93.185 Z"
fill="url(#pieGrad4)" filter="url(#pieShadow)"
aria-label="产品D占比15%"/>
<!-- 产品E: 5% -->
<path d="M 0 0 L -76.64 93.185 A 120 120 0 0 1 0 -120 Z"
fill="url(#pieGrad5)" filter="url(#pieShadow)"
aria-label="产品E占比5%"/>
</g>
<!-- 标签线和文本 -->
<g font-family="Arial" font-size="12" fill="#333">
<!-- 产品A标签 -->
<line x1="292" y1="166" x2="350" y2="120" stroke="#666" stroke-width="1"/>
<text x="355" y="115">产品A</text>
<text x="355" y="130" font-weight="bold">35%</text>
<!-- 产品B标签 -->
<line x1="335" y1="166" x2="380" y2="150" stroke="#666" stroke-width="1"/>
<text x="385" y="145">产品B</text>
<text x="385" y="160" font-weight="bold">25%</text>
<!-- 产品C标签 -->
<line x1="335" y1="334" x2="380" y2="350" stroke="#666" stroke-width="1"/>
<text x="385" y="345">产品C</text>
<text x="385" y="360" font-weight="bold">20%</text>
<!-- 产品D标签 -->
<line x1="215" y1="343" x2="160" y2="380" stroke="#666" stroke-width="1"/>
<text x="120" y="375">产品D</text>
<text x="120" y="390" font-weight="bold">15%</text>
<!-- 产品E标签 -->
<line x1="174" y1="156" x2="120" y2="120" stroke="#666" stroke-width="1"/>
<text x="80" y="115">产品E</text>
<text x="80" y="130" font-weight="bold">5%</text>
</g>
<!-- 中心装饰 -->
<circle cx="250" cy="250" r="40" fill="white" stroke="#E0E0E0" stroke-width="2"/>
<text x="250" y="245" font-family="Arial" font-size="12" text-anchor="middle" fill="#666">总计</text>
<text x="250" y="260" font-family="Arial" font-size="14" text-anchor="middle" font-weight="bold">100%</text>
<!-- 标题 -->
<text x="300" y="40" font-family="Arial" font-size="20" text-anchor="middle" font-weight="bold">
市场份额分布图
</text>
<!-- 图例 -->
<g role="group" aria-label="图例">
<rect x="50" y="400" width="15" height="15" fill="url(#pieGrad1)"/>
<text x="75" y="412" font-family="Arial" font-size="12">产品A (35%)</text>
<rect x="180" y="400" width="15" height="15" fill="url(#pieGrad2)"/>
<text x="205" y="412" font-family="Arial" font-size="12">产品B (25%)</text>
<rect x="310" y="400" width="15" height="15" fill="url(#pieGrad3)"/>
<text x="335" y="412" font-family="Arial" font-size="12">产品C (20%)</text>
<rect x="440" y="400" width="15" height="15" fill="url(#pieGrad4)"/>
<text x="465" y="412" font-family="Arial" font-size="12">产品D (15%)</text>
<rect x="50" y="430" width="15" height="15" fill="url(#pieGrad5)"/>
<text x="75" y="442" font-family="Arial" font-size="12">产品E (5%)</text>
</g>
</svg>
</body>
</html>8.5.2 图标设计系统
用户界面图标
创建一套UI图标系统：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG图标系统</title>
</head>
<body>
<h1>SVG用户界面图标</h1>
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- 定义通用样式 -->
<defs>
<style>
.icon { fill: #333; stroke: #333; stroke-width: 2; }
.icon-bg { fill: #f5f5f5; stroke: #ddd; stroke-width: 1; }
.icon-primary { fill: #007bff; stroke: #007bff; }
.icon-success { fill: #28a745; stroke: #28a745; }
.icon-warning { fill: #ffc107; stroke: #ffc107; }
.icon-danger { fill: #dc3545; stroke: #dc3545; }
</style>
</defs>
<!-- 导航图标 -->
<g role="group" aria-label="导航图标">
<text x="50" y="30" font-family="Arial" font-size="16" font-weight="bold">导航图标</text>
<!-- 首页图标 -->
<g transform="translate(50,50)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 15 35 L 30 20 L 45 35 L 45 45 L 35 45 L 35 35 L 25 35 L 25 45 L 15 45 Z"
class="icon" aria-label="首页"/>
<text x="30" y="75" font-family="Arial" font-size="10" text-anchor="middle">首页</text>
</g>
<!-- 搜索图标 -->
<g transform="translate(130,50)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="28" cy="28" r="8" fill="none" class="icon"/>
<line x1="34" y1="34" x2="42" y2="42" class="icon"/>
<text x="30" y="75" font-family="Arial" font-size="10" text-anchor="middle">搜索</text>
</g>
<!-- 菜单图标 -->
<g transform="translate(210,50)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<line x1="20" y1="25" x2="40" y2="25" class="icon"/>
<line x1="20" y1="30" x2="40" y2="30" class="icon"/>
<line x1="20" y1="35" x2="40" y2="35" class="icon"/>
<text x="30" y="75" font-family="Arial" font-size="10" text-anchor="middle">菜单</text>
</g>
<!-- 用户图标 -->
<g transform="translate(290,50)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="30" cy="25" r="5" class="icon"/>
<path d="M 20 40 Q 30 35 40 40" class="icon" fill="none"/>
<text x="30" y="75" font-family="Arial" font-size="10" text-anchor="middle">用户</text>
</g>
<!-- 设置图标 -->
<g transform="translate(370,50)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="30" cy="30" r="6" fill="none" class="icon"/>
<path d="M 30 18 L 32 22 L 30 26 L 28 22 Z" class="icon"/>
<path d="M 42 30 L 38 32 L 34 30 L 38 28 Z" class="icon"/>
<path d="M 30 42 L 28 38 L 30 34 L 32 38 Z" class="icon"/>
<path d="M 18 30 L 22 28 L 26 30 L 22 32 Z" class="icon"/>
<text x="30" y="75" font-family="Arial" font-size="10" text-anchor="middle">设置</text>
</g>
</g>
<!-- 操作图标 -->
<g role="group" aria-label="操作图标">
<text x="50" y="170" font-family="Arial" font-size="16" font-weight="bold">操作图标</text>
<!-- 添加图标 -->
<g transform="translate(50,190)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="30" cy="30" r="12" fill="none" class="icon-primary"/>
<line x1="30" y1="24" x2="30" y2="36" class="icon-primary"/>
<line x1="24" y1="30" x2="36" y2="30" class="icon-primary"/>
<text x="30" y="265" font-family="Arial" font-size="10" text-anchor="middle">添加</text>
</g>
<!-- 编辑图标 -->
<g transform="translate(130,190)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 20 40 L 20 35 L 35 20 L 40 25 L 25 40 Z" class="icon-primary"/>
<line x1="32" y1="23" x2="37" y2="28" class="icon-primary"/>
<text x="30" y="265" font-family="Arial" font-size="10" text-anchor="middle">编辑</text>
</g>
<!-- 删除图标 -->
<g transform="translate(210,190)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 22 20 L 22 18 L 38 18 L 38 20 M 18 22 L 42 22 M 24 24 L 24 38 M 30 24 L 30 38 M 36 24 L 36 38"
class="icon-danger" fill="none"/>
<text x="30" y="265" font-family="Arial" font-size="10" text-anchor="middle">删除</text>
</g>
<!-- 保存图标 -->
<g transform="translate(290,190)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 20 20 L 20 40 L 40 40 L 40 25 L 35 20 Z" class="icon-success" fill="none"/>
<line x1="24" y1="20" x2="24" y2="28" class="icon-success"/>
<line x1="36" y1="20" x2="36" y2="23" class="icon-success"/>
<text x="30" y="265" font-family="Arial" font-size="10" text-anchor="middle">保存</text>
</g>
<!-- 下载图标 -->
<g transform="translate(370,190)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 30 18 L 30 35 M 25 30 L 30 35 L 35 30" class="icon-success" fill="none"/>
<line x1="20" y1="38" x2="40" y2="38" class="icon-success"/>
<text x="30" y="265" font-family="Arial" font-size="10" text-anchor="middle">下载</text>
</g>
</g>
<!-- 状态图标 -->
<g role="group" aria-label="状态图标">
<text x="50" y="310" font-family="Arial" font-size="16" font-weight="bold">状态图标</text>
<!-- 成功图标 -->
<g transform="translate(50,330)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="30" cy="30" r="12" fill="none" class="icon-success"/>
<path d="M 24 30 L 28 34 L 36 26" class="icon-success" fill="none"/>
<text x="30" y="405" font-family="Arial" font-size="10" text-anchor="middle">成功</text>
</g>
<!-- 警告图标 -->
<g transform="translate(130,330)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 30 18 L 42 38 L 18 38 Z" class="icon-warning" fill="none"/>
<line x1="30" y1="26" x2="30" y2="32" class="icon-warning"/>
<circle cx="30" cy="35" r="1" class="icon-warning"/>
<text x="30" y="405" font-family="Arial" font-size="10" text-anchor="middle">警告</text>
</g>
<!-- 错误图标 -->
<g transform="translate(210,330)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="30" cy="30" r="12" fill="none" class="icon-danger"/>
<line x1="25" y1="25" x2="35" y2="35" class="icon-danger"/>
<line x1="35" y1="25" x2="25" y2="35" class="icon-danger"/>
<text x="30" y="405" font-family="Arial" font-size="10" text-anchor="middle">错误</text>
</g>
<!-- 信息图标 -->
<g transform="translate(290,330)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="30" cy="30" r="12" fill="none" class="icon-primary"/>
<circle cx="30" cy="25" r="1" class="icon-primary"/>
<line x1="30" y1="28" x2="30" y2="34" class="icon-primary"/>
<text x="30" y="405" font-family="Arial" font-size="10" text-anchor="middle">信息</text>
</g>
<!-- 加载图标 -->
<g transform="translate(370,330)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="30" cy="30" r="10" fill="none" stroke="#ddd" stroke-width="2"/>
<path d="M 30 20 A 10 10 0 0 1 40 30" fill="none" class="icon-primary"/>
<text x="30" y="405" font-family="Arial" font-size="10" text-anchor="middle">加载</text>
</g>
</g>
<!-- 社交图标 -->
<g role="group" aria-label="社交图标">
<text x="50" y="450" font-family="Arial" font-size="16" font-weight="bold">社交图标</text>
<!-- 分享图标 -->
<g transform="translate(50,470)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<circle cx="22" cy="25" r="3" class="icon"/>
<circle cx="38" cy="25" r="3" class="icon"/>
<circle cx="30" cy="38" r="3" class="icon"/>
<line x1="25" y1="27" x2="33" y2="36" class="icon"/>
<line x1="35" y1="27" x2="27" y2="36" class="icon"/>
<text x="30" y="545" font-family="Arial" font-size="10" text-anchor="middle">分享</text>
</g>
<!-- 收藏图标 -->
<g transform="translate(130,470)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 30 22 L 32 28 L 38 28 L 33 32 L 35 38 L 30 35 L 25 38 L 27 32 L 22 28 L 28 28 Z"
class="icon-warning"/>
<text x="30" y="545" font-family="Arial" font-size="10" text-anchor="middle">收藏</text>
</g>
<!-- 点赞图标 -->
<g transform="translate(210,470)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 25 35 L 25 25 Q 25 20 30 20 Q 35 20 35 25 L 35 35 Z" class="icon-primary"/>
<rect x="22" y="32" width="16" height="8" class="icon-primary"/>
<text x="30" y="545" font-family="Arial" font-size="10" text-anchor="middle">点赞</text>
</g>
<!-- 消息图标 -->
<g transform="translate(290,470)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 20 25 Q 20 20 25 20 L 35 20 Q 40 20 40 25 L 40 32 Q 40 37 35 37 L 28 37 L 25 40 L 25 37 Q 20 37 20 32 Z"
class="icon" fill="none"/>
<text x="30" y="545" font-family="Arial" font-size="10" text-anchor="middle">消息</text>
</g>
<!-- 通知图标 -->
<g transform="translate(370,470)">
<rect x="0" y="0" width="60" height="60" class="icon-bg" rx="5"/>
<path d="M 25 22 Q 25 18 30 18 Q 35 18 35 22 L 35 30 Q 35 35 30 35 Q 25 35 25 30 Z"
class="icon" fill="none"/>
<path d="M 28 37 Q 30 40 32 37" class="icon" fill="none"/>
<circle cx="36" cy="20" r="3" class="icon-danger"/>
<text x="30" y="545" font-family="Arial" font-size="10" text-anchor="middle">通知</text>
</g>
</g>
</svg>
</body>
</html>8.5.3 插图和装饰元素
网站插图设计
创建网站使用的插图元素：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG网站插图</title>
</head>
<body>
<h1>SVG网站插图设计</h1>
<svg width="900" height="700" xmlns="http://www.w3.org/2000/svg">
<!-- 定义渐变和滤镜 -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB"/>
<stop offset="100%" style="stop-color:#E0F6FF"/>
</linearGradient>
<linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#90EE90"/>
<stop offset="100%" style="stop-color:#228B22"/>
</linearGradient>
<radialGradient id="sunGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#FFD700"/>
<stop offset="100%" style="stop-color:#FFA500"/>
</radialGradient>
<filter id="cloudShadow">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.1)"/>
</filter>
<filter id="buildingShadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="rgba(0,0,0,0.3)"/>
</filter>
</defs>
<!-- 背景天空 -->
<rect width="900" height="400" fill="url(#skyGradient)"/>
<!-- 地面 -->
<rect y="400" width="900" height="300" fill="url(#groundGradient)"/>
<!-- 太阳 -->
<circle cx="150" cy="120" r="40" fill="url(#sunGradient)"/>
<g stroke="#FFD700" stroke-width="3" fill="none">
<line x1="150" y1="40" x2="150" y2="60"/>
<line x1="150" y1="180" x2="150" y2="200"/>
<line x1="70" y1="120" x2="90" y2="120"/>
<line x1="210" y1="120" x2="230" y2="120"/>
<line x1="103" y1="73" x2="117" y2="87"/>
<line x1="183" y1="153" x2="197" y2="167"/>
<line x1="197" y1="73" x2="183" y2="87"/>
<line x1="117" y1="153" x2="103" y2="167"/>
</g>
<!-- 云朵 -->
<g filter="url(#cloudShadow)">
<g fill="white">
<circle cx="350" cy="80" r="25"/>
<circle cx="370" cy="75" r="30"/>
<circle cx="390" cy="80" r="25"/>
<circle cx="400" cy="100" r="20"/>
<circle cx="370" cy="105" r="28"/>
<circle cx="340" cy="100" r="20"/>
</g>
<g fill="white" transform="translate(200,150)">
<circle cx="0" cy="0" r="20"/>
<circle cx="20" cy="-5" r="25"/>
<circle cx="40" cy="0" r="20"/>
<circle cx="50" cy="15" r="15"/>
<circle cx="25" cy="20" r="23"/>
<circle cx="0" cy="15" r="15"/>
</g>
</g>
<!-- 建筑物 -->
<g filter="url(#buildingShadow)">
<!-- 办公楼1 -->
<rect x="400" y="200" width="80" height="200" fill="#4A90E2"/>
<rect x="410" y="220" width="15" height="15" fill="#87CEEB"/>
<rect x="430" y="220" width="15" height="15" fill="#87CEEB"/>
<rect x="450" y="220" width="15" height="15" fill="#87CEEB"/>
<rect x="410" y="250" width="15" height="15" fill="#87CEEB"/>
<rect x="430" y="250" width="15" height="15" fill="#87CEEB"/>
<rect x="450" y="250" width="15" height="15" fill="#87CEEB"/>
<rect x="410" y="280" width="15" height="15" fill="#87CEEB"/>
<rect x="430" y="280" width="15" height="15" fill="#87CEEB"/>
<rect x="450" y="280" width="15" height="15" fill="#87CEEB"/>
<!-- 办公楼2 -->
<rect x="500" y="150" width="70" height="250" fill="#7B68EE"/>
<rect x="510" y="170" width="12" height="12" fill="#E6E6FA"/>
<rect x="525" y="170" width="12" height="12" fill="#E6E6FA"/>
<rect x="540" y="170" width="12" height="12" fill="#E6E6FA"/>
<rect x="555" y="170" width="12" height="12" fill="#E6E6FA"/>
<rect x="510" y="190" width="12" height="12" fill="#E6E6FA"/>
<rect x="525" y="190" width="12" height="12" fill="#E6E6FA"/>
<rect x="540" y="190" width="12" height="12" fill="#E6E6FA"/>
<rect x="555" y="190" width="12" height="12" fill="#E6E6FA"/>
<!-- 办公楼3 -->
<rect x="590" y="180" width="60" height="220" fill="#FF6B6B"/>
<rect x="600" y="200" width="10" height="10" fill="#FFE4E1"/>
<rect x="615" y="200" width="10" height="10" fill="#FFE4E1"/>
<rect x="630" y="200" width="10" height="10" fill="#FFE4E1"/>
<rect x="600" y="220" width="10" height="10" fill="#FFE4E1"/>
<rect x="615" y="220" width="10" height="10" fill="#FFE4E1"/>
<rect x="630" y="220" width="10" height="10" fill="#FFE4E1"/>
</g>
<!-- 树木 -->
<g>
<!-- 树1 -->
<rect x="100" y="350" width="15" height="50" fill="#8B4513"/>
<circle cx="107" cy="340" r="25" fill="#228B22"/>
<circle cx="120" cy="330" r="20" fill="#32CD32"/>
<circle cx="95" cy="330" r="20" fill="#32CD32"/>
<!-- 树2 -->
<rect x="280" y="360" width="12" height="40" fill="#8B4513"/>
<circle cx="286" cy="350" r="20" fill="#228B22"/>
<circle cx="295" cy="340" r="15" fill="#32CD32"/>
<circle cx="275" cy="340" r="15" fill="#32CD32"/>
<!-- 树3 -->
<rect x="750" y="340" width="18" height="60" fill="#8B4513"/>
<circle cx="759" cy="330" r="30" fill="#228B22"/>
<circle cx="775" cy="320" r="25" fill="#32CD32"/>
<circle cx="745" cy="320" r="25" fill="#32CD32"/>
</g>
<!-- 道路 -->
<rect x="0" y="450" width="900" height="80" fill="#696969"/>
<rect x="0" y="485" width="900" height="10" fill="#FFFF00"/>
<!-- 汽车 -->
<g transform="translate(200,440)">
<rect x="0" y="20" width="60" height="25" fill="#FF4500" rx="5"/>
<rect x="5" y="10" width="50" height="15" fill="#87CEEB" rx="3"/>
<circle cx="15" cy="50" r="8" fill="#333"/>
<circle cx="45" cy="50" r="8" fill="#333"/>
<circle cx="15" cy="50" r="5" fill="#C0C0C0"/>
<circle cx="45" cy="50" r="5" fill="#C0C0C0"/>
</g>
<!-- 人物 -->
<g transform="translate(700,380)">
<!-- 人物1 -->
<circle cx="0" cy="0" r="8" fill="#FDBCB4"/>
<rect x="-5" y="8" width="10" height="15" fill="#4A90E2"/>
<rect x="-6" y="23" width="5" height="12" fill="#000080"/>
<rect x="1" y="23" width="5" height="12" fill="#000080"/>
<rect x="-8" y="12" width="6" height="2" fill="#FDBCB4"/>
<rect x="2" y="12" width="6" height="2" fill="#FDBCB4"/>
<!-- 人物2 -->
<g transform="translate(30,0)">
<circle cx="0" cy="0" r="8" fill="#FDBCB4"/>
<rect x="-5" y="8" width="10" height="15" fill="#FF69B4"/>
<rect x="-6" y="23" width="5" height="12" fill="#8B4513"/>
<rect x="1" y="23" width="5" height="12" fill="#8B4513"/>
<rect x="-8" y="12" width="6" height="2" fill="#FDBCB4"/>
<rect x="2" y="12" width="6" height="2" fill="#FDBCB4"/>
</g>
</g>
<!-- 装饰元素 -->
<g>
<!-- 飞鸟 -->
<path d="M 600 100 Q 605 95 610 100 Q 615 105 620 100"
stroke="#333" stroke-width="2" fill="none"/>
<path d="M 650 120 Q 655 115 660 120 Q 665 125 670 120"
stroke="#333" stroke-width="2" fill="none"/>
<!-- 花朵 -->
<g transform="translate(350,480)">
<circle cx="0" cy="0" r="3" fill="#FF69B4"/>
<circle cx="0" cy="-6" r="3" fill="#FF69B4"/>
<circle cx="6" cy="0" r="3" fill="#FF69B4"/>
<circle cx="0" cy="6" r="3" fill="#FF69B4"/>
<circle cx="-6" cy="0" r="3" fill="#FF69B4"/>
<circle cx="0" cy="0" r="2" fill="#FFD700"/>
</g>
<g transform="translate(500,500)">
<circle cx="0" cy="0" r="3" fill="#FF1493"/>
<circle cx="0" cy="-6" r="3" fill="#FF1493"/>
<circle cx="6" cy="0" r="3" fill="#FF1493"/>
<circle cx="0" cy="6" r="3" fill="#FF1493"/>
<circle cx="-6" cy="0" r="3" fill="#FF1493"/>
<circle cx="0" cy="0" r="2" fill="#FFD700"/>
</g>
</g>
<!-- 标题文字 -->
<text x="450" y="650" font-family="Arial" font-size="24" font-weight="bold"
text-anchor="middle" fill="#333">智慧城市生活</text>
<text x="450" y="680" font-family="Arial" font-size="14" text-anchor="middle" fill="#666">
现代化城市建设与绿色环保并重
</text>
</svg>
</body>
</html>8.5.4 响应式SVG设计
自适应布局图标
创建响应式SVG布局：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式SVG设计</title>
<style>
.responsive-svg {
width: 100%;
height: auto;
max-width: 800px;
border: 1px solid #ddd;
margin: 20px 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
@media (max-width: 768px) {
.responsive-svg {
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式SVG设计</h1>
<!-- 响应式信息图表 -->
<svg class="responsive-svg" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"
role="img" aria-labelledby="responsive-title" aria-describedby="responsive-desc">
<title id="responsive-title">响应式设计概念图</title>
<desc id="responsive-desc">展示响应式设计在不同设备上的适配效果</desc>
<!-- 定义样式 -->
<defs>
<linearGradient id="deviceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea"/>
<stop offset="100%" style="stop-color:#764ba2"/>
</linearGradient>
<linearGradient id="screenGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb"/>
<stop offset="100%" style="stop-color:#f5576c"/>
</linearGradient>
<filter id="deviceShadow">
<feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="rgba(0,0,0,0.3)"/>
</filter>
</defs>
<!-- 背景 -->
<rect width="800" height="600" fill="#f8f9fa"/>
<!-- 标题 -->
<text x="400" y="50" font-family="Arial" font-size="28" font-weight="bold"
text-anchor="middle" fill="#333">响应式设计</text>
<text x="400" y="80" font-family="Arial" font-size="16" text-anchor="middle" fill="#666">
一套代码，多端适配
</text>
<!-- 桌面设备 -->
<g transform="translate(50,120)" filter="url(#deviceShadow)">
<!-- 显示器 -->
<rect x="0" y="0" width="200" height="120" fill="url(#deviceGradient)" rx="5"/>
<rect x="10" y="10" width="180" height="100" fill="white" rx="3"/>
<!-- 屏幕内容 -->
<rect x="15" y="15" width="170" height="20" fill="#007bff"/>
<rect x="15" y="40" width="50" height="60" fill="#28a745"/>
<rect x="70" y="40" width="50" height="60" fill="#ffc107"/>
<rect x="125" y="40" width="50" height="60" fill="#dc3545"/>
<!-- 支架 -->
<rect x="90" y="120" width="20" height="30" fill="#666"/>
<rect x="60" y="145" width="80" height="10" fill="#666" rx="5"/>
<text x="100" y="180" font-family="Arial" font-size="14" text-anchor="middle" fill="#333">桌面端</text>
<text x="100" y="200" font-family="Arial" font-size="12" text-anchor="middle" fill="#666">1200px+</text>
</g>
<!-- 平板设备 -->
<g transform="translate(320,140)" filter="url(#deviceShadow)">
<!-- 平板框架 -->
<rect x="0" y="0" width="120" height="160" fill="url(#deviceGradient)" rx="15"/>
<rect x="10" y="20" width="100" height="120" fill="white" rx="5"/>
<!-- 屏幕内容 -->
<rect x="15" y="25" width="90" height="15" fill="#007bff"/>
<rect x="15" y="45" width="90" height="40" fill="#28a745"/>
<rect x="15" y="90" width="40" height="40" fill="#ffc107"/>
<rect x="65" y="90" width="40" height="40" fill="#dc3545"/>
<!-- 按钮 -->
<circle cx="60" cy="150" r="8" fill="#333"/>
<text x="60" y="190" font-family="Arial" font-size="14" text-anchor="middle" fill="#333">平板端</text>
<text x="60" y="210" font-family="Arial" font-size="12" text-anchor="middle" fill="#666">768px-1199px</text>
</g>
<!-- 手机设备 -->
<g transform="translate(520,150)" filter="url(#deviceShadow)">
<!-- 手机框架 -->
<rect x="0" y="0" width="80" height="140" fill="url(#deviceGradient)" rx="20"/>
<rect x="10" y="20" width="60" height="100" fill="white" rx="5"/>
<!-- 屏幕内容 -->
<rect x="15" y="25" width="50" height="12" fill="#007bff"/>
<rect x="15" y="40" width="50" height="25" fill="#28a745"/>
<rect x="15" y="70" width="50" height="20" fill="#ffc107"/>
<rect x="15" y="95" width="50" height="20" fill="#dc3545"/>
<!-- 按钮 -->
<circle cx="40" cy="130" r="6" fill="#333"/>
<text x="40" y="170" font-family="Arial" font-size="14" text-anchor="middle" fill="#333">移动端</text>
<text x="40" y="190" font-family="Arial" font-size="12" text-anchor="middle" fill="#666">≤767px</text>
</g>
<!-- 连接线 -->
<g stroke="#007bff" stroke-width="2" fill="none">
<path d="M 200 200 Q 250 200 280 200"/>
<path d="M 400 220 Q 450 220 480 220"/>
</g>
<!-- 特性说明 -->
<g transform="translate(50,350)">
<text x="0" y="0" font-family="Arial" font-size="20" font-weight="bold" fill="#333">核心特性</text>
<!-- 特性1 -->
<g transform="translate(0,40)">
<circle cx="10" cy="10" r="8" fill="#007bff"/>
<text x="10" y="15" font-family="Arial" font-size="12" fill="white" text-anchor="middle">1</text>
<text x="30" y="15" font-family="Arial" font-size="14" fill="#333">流式布局</text>
<text x="30" y="30" font-family="Arial" font-size="12" fill="#666">使用相对单位，适配不同屏幕</text>
</g>
<!-- 特性2 -->
<g transform="translate(250,40)">
<circle cx="10" cy="10" r="8" fill="#28a745"/>
<text x="10" y="15" font-family="Arial" font-size="12" fill="white" text-anchor="middle">2</text>
<text x="30" y="15" font-family="Arial" font-size="14" fill="#333">弹性图像</text>
<text x="30" y="30" font-family="Arial" font-size="12" fill="#666">SVG矢量图形完美缩放</text>
</g>
<!-- 特性3 -->
<g transform="translate(500,40)">
<circle cx="10" cy="10" r="8" fill="#ffc107"/>
<text x="10" y="15" font-family="Arial" font-size="12" fill="white" text-anchor="middle">3</text>
<text x="30" y="15" font-family="Arial" font-size="14" fill="#333">媒体查询</text>
<text x="30" y="30" font-family="Arial" font-size="12" fill="#666">CSS控制不同设备样式</text>
</g>
<!-- 特性4 -->
<g transform="translate(0,100)">
<circle cx="10" cy="10" r="8" fill="#dc3545"/>
<text x="10" y="15" font-family="Arial" font-size="12" fill="white" text-anchor="middle">4</text>
<text x="30" y="15" font-family="Arial" font-size="14" fill="#333">优雅降级</text>
<text x="30" y="30" font-family="Arial" font-size="12" fill="#666">保证基本功能兼容性</text>
</g>
<!-- 特性5 -->
<g transform="translate(250,100)">
<circle cx="10" cy="10" r="8" fill="#6f42c1"/>
<text x="10" y="15" font-family="Arial" font-size="12" fill="white" text-anchor="middle">5</text>
<text x="30" y="15" font-family="Arial" font-size="14" fill="#333">触摸优化</text>
<text x="30" y="30" font-family="Arial" font-size="12" fill="#666">适配触摸设备交互</text>
</g>
<!-- 特性6 -->
<g transform="translate(500,100)">
<circle cx="10" cy="10" r="8" fill="#20c997"/>
<text x="10" y="15" font-family="Arial" font-size="12" fill="white" text-anchor="middle">6</text>
<text x="30" y="15" font-family="Arial" font-size="14" fill="#333">性能优化</text>
<text x="30" y="30" font-family="Arial" font-size="12" fill="#666">减少资源加载时间</text>
</g>
</g>
</svg>
</div>
</body>
</html>8.5.5 SVG与HTML集成
完整网页布局
创建包含SVG元素的完整网页：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG与HTML集成应用</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 0;
text-align: center;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hero-svg {
width: 100%;
max-width: 600px;
height: auto;
margin: 2rem 0;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 4rem 0;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
text-align: center;
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
}
.stats {
background: #f8f9fa;
padding: 4rem 0;
text-align: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.stat-item {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: #667eea;
}
.footer {
background: #333;
color: white;
text-align: center;
padding: 2rem 0;
}
@media (max-width: 768px) {
.features {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- 头部 -->
<header class="header">
<div class="container">
<h1>SVG技术应用展示</h1>
<p>现代Web开发中的矢量图形解决方案</p>
<!-- 主要插图 -->
<svg class="hero-svg" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea"/>
<stop offset="100%" style="stop-color:#764ba2"/>
</linearGradient>
</defs>
<!-- 背景 -->
<rect width="600" height="300" fill="url(#heroGrad)" opacity="0.1"/>
<!-- 主要图形 -->
<g transform="translate(300,150)">
<circle cx="0" cy="0" r="80" fill="none" stroke="white" stroke-width="2"/>
<circle cx="0" cy="0" r="60" fill="none" stroke="white" stroke-width="2"/>
<circle cx="0" cy="0" r="40" fill="none" stroke="white" stroke-width="2"/>
<!-- SVG文字 -->
<text x="0" y="10" font-family="Arial" font-size="24" font-weight="bold"
text-anchor="middle" fill="white">SVG</text>
<!-- 装饰元素 -->
<circle cx="-60" cy="-60" r="4" fill="white"/>
<circle cx="60" cy="-60" r="4" fill="white"/>
<circle cx="60" cy="60" r="4" fill="white"/>
<circle cx="-60" cy="60" r="4" fill="white"/>
<!-- 连接线 -->
<line x1="-60" y1="-60" x2="60" y2="60" stroke="white" stroke-width="1"/>
<line x1="60" y1="-60" x2="-60" y2="60" stroke="white" stroke-width="1"/>
</g>
</svg>
</div>
</header>
<!-- 特性展示 -->
<section class="container">
<div class="features">
<div class="feature-card">
<svg class="feature-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#667eea"/>
<path d="M 30 45 L 45 60 L 70 35" stroke="white" stroke-width="4" fill="none"/>
</svg>
<h3>矢量图形</h3>
<p>无损缩放，在任何分辨率下都保持清晰锐利的显示效果</p>
</div>
<div class="feature-card">
<svg class="feature-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="60" height="60" fill="#28a745" rx="5"/>
<text x="50" y="55" font-family="Arial" font-size="16" font-weight="bold"
text-anchor="middle" fill="white">CSS</text>
</svg>
<h3>CSS集成</h3>
<p>完美支持CSS样式，可以使用CSS控制SVG元素的外观和动画</p>
</div>
<div class="feature-card">
<svg class="feature-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 90,90 10,90" fill="#ffc107"/>
<circle cx="50" cy="40" r="5" fill="white"/>
<rect x="47" y="50" width="6" height="20" fill="white"/>
</svg>
<h3>交互性</h3>
<p>支持鼠标事件和触摸事件，可以创建交互式的图形界面</p>
</div>
<div class="feature-card">
<svg class="feature-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="40" width="80" height="20" fill="#dc3545" rx="10"/>
<text x="50" y="55" font-family="Arial" font-size="12" font-weight="bold"
text-anchor="middle" fill="white">HTML5</text>
</svg>
<h3>HTML5标准</h3>
<p>作为HTML5标准的一部分，得到所有现代浏览器的原生支持</p>
</div>
</div>
</section>
<!-- 统计数据 -->
<section class="stats">
<div class="container">
<h2>SVG技术优势</h2>
<div class="stats-grid">
<div class="stat-item">
<svg width="60" height="60" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#667eea"/>
<text x="50" y="35" font-family="Arial" font-size="16" font-weight="bold"
text-anchor="middle" fill="white">100%</text>
<text x="50" y="65" font-family="Arial" font-size="10" text-anchor="middle" fill="white">矢量</text>
</svg>
<div class="stat-number">100%</div>
<p>矢量图形，无损缩放</p>
</div>
<div class="stat-item">
<svg width="60" height="60" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="60" height="60" fill="#28a745" rx="5"/>
<text x="50" y="55" font-family="Arial" font-size="12" font-weight="bold"
text-anchor="middle" fill="white">小文件</text>
</svg>
<div class="stat-number">50%</div>
<p>文件大小减少</p>
</div>
<div class="stat-item">
<svg width="60" height="60" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 90,90 10,90" fill="#ffc107"/>
<text x="50" y="55" font-family="Arial" font-size="12" font-weight="bold"
text-anchor="middle" fill="white">快速</text>
</svg>
<div class="stat-number">3x</div>
<p>加载速度提升</p>
</div>
<div class="stat-item">
<svg width="60" height="60" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#dc3545"/>
<path d="M 30 45 L 45 60 L 70 35" stroke="white" stroke-width="4" fill="none"/>
</svg>
<div class="stat-number">99%</div>
<p>浏览器兼容性</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p>© 2024 SVG技术应用展示. HTML5学习项目</p>
</div>
</footer>
</body>
</html>关键要点总结
- 数据可视化：SVG是创建图表和数据可视化的理想选择
- 图标系统：使用SVG创建可缩放的图标库
- 插图设计：SVG适合创建网站装饰和插图元素
- 响应式设计：SVG完美支持响应式布局
- HTML集成：SVG可以无缝集成到HTML页面中
参考资源
常见问题解答
Q: 如何优化SVG文件大小？ A: 移除不必要的元素和属性，使用简化的路径，合理使用复用元素如<use>。
Q: SVG图标如何实现多色彩？ A: 使用CSS变量或者定义多个版本的图标，通过CSS控制颜色。
Q: 如何确保SVG在不同设备上的显示效果？ A: 使用viewBox属性，设置适当的preserveAspectRatio，测试不同分辨率。
Q: SVG动画如何控制性能？ A: 合理使用CSS动画代替复杂的SVG动画，避免过度使用滤镜效果。
Q: 如何处理SVG的无障碍访问？ A: 添加title、desc元素，使用适当的ARIA属性，确保键盘导航支持。