8.2 SVG基本图形

关键词: SVG基本图形, 矩形元素, 圆形元素, 椭圆元素, 线条元素, 多边形元素, 路径元素, 基本几何图形

学习目标

• 掌握SVG矩形元素的语法和属性设置
• 学会使用SVG圆形和椭圆元素
• 理解SVG线条元素的基本用法
• 掌握SVG多边形和折线元素的语法
• 学会使用SVG路径元素创建复杂图形

8.2.1 矩形元素(rect)

矩形元素的基本语法

矩形是SVG中最基本的图形元素之一，使用<rect>元素来定义：

<!-- 基本矩形 -->
<svg width="300" height="200" viewBox="0 0 300 200">
    <rect x="20" y="20" width="100" height="80" fill="lightblue" />
</svg>

矩形的基本属性

矩形元素支持多种属性来控制其外观：

<!-- 矩形属性示例 -->
<svg width="400" height="300" viewBox="0 0 400 300">
    <!-- 基本矩形 -->
    <rect x="20" y="20" width="80" height="60" fill="red" />
    <text x="60" y="100" text-anchor="middle" font-size="12">基本矩形</text>
    
    <!-- 带描边的矩形 -->
    <rect x="120" y="20" width="80" height="60" 
          fill="lightgreen" stroke="green" stroke-width="3" />
    <text x="160" y="100" text-anchor="middle" font-size="12">带描边</text>
    
    <!-- 透明矩形 -->
    <rect x="220" y="20" width="80" height="60" 
          fill="blue" fill-opacity="0.5" stroke="darkblue" stroke-width="2" />
    <text x="260" y="100" text-anchor="middle" font-size="12">透明矩形</text>
    
    <!-- 虚线描边矩形 -->
    <rect x="320" y="20" width="80" height="60" 
          fill="yellow" stroke="orange" stroke-width="2" stroke-dasharray="5,5" />
    <text x="360" y="100" text-anchor="middle" font-size="12">虚线描边</text>
</svg>

圆角矩形

矩形可以通过rx和ry属性创建圆角效果：

<!-- 圆角矩形示例 -->
<svg width="400" height="250" viewBox="0 0 400 250">
    <!-- 圆角矩形 -->
    <rect x="20" y="20" width="80" height="60" rx="10" ry="10" fill="lightcoral" />
    <text x="60" y="100" text-anchor="middle" font-size="12">圆角矩形</text>
    
    <!-- 不同圆角半径 -->
    <rect x="120" y="20" width="80" height="60" rx="20" ry="10" fill="lightblue" />
    <text x="160" y="100" text-anchor="middle" font-size="12">椭圆圆角</text>
    
    <!-- 大圆角矩形 -->
    <rect x="220" y="20" width="80" height="60" rx="25" ry="25" fill="lightgreen" />
    <text x="260" y="100" text-anchor="middle" font-size="12">大圆角</text>
    
    <!-- 胶囊形状 -->
    <rect x="320" y="20" width="80" height="60" rx="30" ry="30" fill="plum" />
    <text x="360" y="100" text-anchor="middle" font-size="12">胶囊形状</text>
</svg>

矩形的变换

矩形可以通过transform属性进行变换：

<!-- 矩形变换示例 -->
<svg width="400" height="300" viewBox="0 0 400 300">
    <!-- 旋转矩形 -->
    <rect x="80" y="40" width="60" height="40" fill="red" transform="rotate(30 110 60)" />
    <text x="110" y="120" text-anchor="middle" font-size="12">旋转矩形</text>
    
    <!-- 缩放矩形 -->
    <rect x="180" y="40" width="60" height="40" fill="green" transform="scale(1.5)" />
    <text x="280" y="120" text-anchor="middle" font-size="12">缩放矩形</text>
    
    <!-- 倾斜矩形 -->
    <rect x="50" y="160" width="60" height="40" fill="blue" transform="skewX(20)" />
    <text x="80" y="230" text-anchor="middle" font-size="12">倾斜矩形</text>
    
    <!-- 平移矩形 -->
    <rect x="50" y="40" width="60" height="40" fill="purple" transform="translate(200, 120)" />
    <text x="280" y="230" text-anchor="middle" font-size="12">平移矩形</text>
</svg>

8.2.2 圆形元素(circle)

圆形元素的基本语法

圆形使用<circle>元素来定义，需要指定圆心坐标和半径：

<!-- 基本圆形 -->
<svg width="300" height="200" viewBox="0 0 300 200">
    <circle cx="150" cy="100" r="50" fill="lightblue" />
</svg>

圆形的基本属性

圆形元素的主要属性包括圆心坐标和半径：

<!-- 圆形属性示例 -->
<svg width="500" height="300" viewBox="0 0 500 300">
    <!-- 基本圆形 -->
    <circle cx="70" cy="70" r="40" fill="red" />
    <text x="70" y="130" text-anchor="middle" font-size="12">基本圆形</text>
    
    <!-- 带描边的圆形 -->
    <circle cx="180" cy="70" r="40" fill="lightgreen" stroke="green" stroke-width="4" />
    <text x="180" y="130" text-anchor="middle" font-size="12">带描边</text>
    
    <!-- 只有描边的圆形 -->
    <circle cx="290" cy="70" r="40" fill="none" stroke="blue" stroke-width="5" />
    <text x="290" y="130" text-anchor="middle" font-size="12">只有描边</text>
    
    <!-- 渐变填充圆形 -->
    <defs>
        <linearGradient id="circleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
    <circle cx="400" cy="70" r="40" fill="url(#circleGradient)" />
    <text x="400" y="130" text-anchor="middle" font-size="12">渐变填充</text>
</svg>

圆形的样式变化

圆形可以通过不同的样式属性创建各种效果：

<!-- 圆形样式变化 -->
<svg width="450" height="300" viewBox="0 0 450 300">
    <!-- 虚线圆形 -->
    <circle cx="80" cy="80" r="35" fill="pink" stroke="red" stroke-width="3" stroke-dasharray="10,5" />
    <text x="80" y="140" text-anchor="middle" font-size="12">虚线圆形</text>
    
    <!-- 点线圆形 -->
    <circle cx="200" cy="80" r="35" fill="lightblue" stroke="blue" stroke-width="3" stroke-dasharray="3,3" />
    <text x="200" y="140" text-anchor="middle" font-size="12">点线圆形</text>
    
    <!-- 透明圆形 -->
    <circle cx="320" cy="80" r="35" fill="green" fill-opacity="0.6" stroke="darkgreen" stroke-width="3" />
    <text x="320" y="140" text-anchor="middle" font-size="12">透明圆形</text>
    
    <!-- 多重圆形 -->
    <g id="multiple-circles">
        <circle cx="80" cy="200" r="30" fill="orange" fill-opacity="0.7" />
        <circle cx="90" cy="210" r="25" fill="red" fill-opacity="0.7" />
        <circle cx="100" cy="220" r="20" fill="yellow" fill-opacity="0.7" />
    </g>
    <text x="90" y="260" text-anchor="middle" font-size="12">多重圆形</text>
</svg>

8.2.3 椭圆元素(ellipse)

椭圆元素的基本语法

椭圆使用<ellipse>元素来定义，需要指定圆心坐标和两个半径：

<!-- 基本椭圆 -->
<svg width="300" height="200" viewBox="0 0 300 200">
    <ellipse cx="150" cy="100" rx="80" ry="50" fill="lightgreen" />
</svg>

椭圆的基本属性

椭圆元素需要指定x轴和y轴的半径：

<!-- 椭圆属性示例 -->
<svg width="500" height="350" viewBox="0 0 500 350">
    <!-- 基本椭圆 -->
    <ellipse cx="80" cy="80" rx="50" ry="30" fill="lightcoral" />
    <text x="80" y="130" text-anchor="middle" font-size="12">基本椭圆</text>
    
    <!-- 窄椭圆 -->
    <ellipse cx="200" cy="80" rx="20" ry="50" fill="lightblue" />
    <text x="200" y="150" text-anchor="middle" font-size="12">窄椭圆</text>
    
    <!-- 宽椭圆 -->
    <ellipse cx="320" cy="80" rx="60" ry="25" fill="lightgreen" />
    <text x="320" y="130" text-anchor="middle" font-size="12">宽椭圆</text>
    
    <!-- 带描边的椭圆 -->
    <ellipse cx="420" cy="80" rx="40" ry="35" fill="yellow" stroke="orange" stroke-width="3" />
    <text x="420" y="140" text-anchor="middle" font-size="12">带描边</text>
    
    <!-- 旋转椭圆 -->
    <ellipse cx="150" cy="220" rx="50" ry="25" fill="purple" transform="rotate(45 150 220)" />
    <text x="150" y="280" text-anchor="middle" font-size="12">旋转椭圆</text>
    
    <!-- 虚线椭圆 -->
    <ellipse cx="350" cy="220" rx="45" ry="30" fill="none" stroke="red" stroke-width="2" stroke-dasharray="8,4" />
    <text x="350" y="280" text-anchor="middle" font-size="12">虚线椭圆</text>
</svg>

8.2.4 线条元素(line)

线条元素的基本语法

线条使用<line>元素来定义，需要指定起点和终点坐标：

<!-- 基本线条 -->
<svg width="300" height="200" viewBox="0 0 300 200">
    <line x1="50" y1="50" x2="250" y2="150" stroke="blue" stroke-width="2" />
</svg>

线条的基本属性

线条元素的主要属性包括起点、终点和描边样式：

<!-- 线条属性示例 -->
<svg width="400" height="300" viewBox="0 0 400 300">
    <!-- 基本线条 -->
    <line x1="20" y1="30" x2="120" y2="30" stroke="red" stroke-width="2" />
    <text x="70" y="50" text-anchor="middle" font-size="12">基本线条</text>
    
    <!-- 粗线条 -->
    <line x1="20" y1="80" x2="120" y2="80" stroke="green" stroke-width="5" />
    <text x="70" y="100" text-anchor="middle" font-size="12">粗线条</text>
    
    <!-- 虚线 -->
    <line x1="20" y1="130" x2="120" y2="130" stroke="blue" stroke-width="3" stroke-dasharray="10,5" />
    <text x="70" y="150" text-anchor="middle" font-size="12">虚线</text>
    
    <!-- 点线 -->
    <line x1="20" y1="180" x2="120" y2="180" stroke="purple" stroke-width="3" stroke-dasharray="3,3" />
    <text x="70" y="200" text-anchor="middle" font-size="12">点线</text>
    
    <!-- 斜线 -->
    <line x1="150" y1="30" x2="250" y2="100" stroke="orange" stroke-width="3" />
    <text x="200" y="120" text-anchor="middle" font-size="12">斜线</text>
    
    <!-- 垂直线 -->
    <line x1="300" y1="30" x2="300" y2="130" stroke="brown" stroke-width="4" />
    <text x="300" y="150" text-anchor="middle" font-size="12">垂直线</text>
</svg>

线条端点样式

线条的端点可以设置不同的样式：

<!-- 线条端点样式 -->
<svg width="400" height="250" viewBox="0 0 400 250">
    <!-- 圆形端点 -->
    <line x1="30" y1="40" x2="150" y2="40" stroke="red" stroke-width="8" stroke-linecap="round" />
    <text x="90" y="60" text-anchor="middle" font-size="12">圆形端点</text>
    
    <!-- 方形端点 -->
    <line x1="30" y1="90" x2="150" y2="90" stroke="green" stroke-width="8" stroke-linecap="square" />
    <text x="90" y="110" text-anchor="middle" font-size="12">方形端点</text>
    
    <!-- 默认端点 -->
    <line x1="30" y1="140" x2="150" y2="140" stroke="blue" stroke-width="8" stroke-linecap="butt" />
    <text x="90" y="160" text-anchor="middle" font-size="12">默认端点</text>
    
    <!-- 带箭头的线条 -->
    <defs>
        <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L0,6 L9,3 z" fill="red" />
        </marker>
    </defs>
    <line x1="200" y1="40" x2="350" y2="40" stroke="red" stroke-width="2" marker-end="url(#arrow)" />
    <text x="275" y="60" text-anchor="middle" font-size="12">带箭头线条</text>
</svg>

8.2.5 多边形和折线

多边形元素(polygon)

多边形使用<polygon>元素来定义，通过points属性指定所有顶点：

<!-- 多边形示例 -->
<svg width="450" height="300" viewBox="0 0 450 300">
    <!-- 三角形 -->
    <polygon points="80,30 50,80 110,80" fill="red" />
    <text x="80" y="100" text-anchor="middle" font-size="12">三角形</text>
    
    <!-- 正方形 -->
    <polygon points="130,30 180,30 180,80 130,80" fill="green" />
    <text x="155" y="100" text-anchor="middle" font-size="12">正方形</text>
    
    <!-- 五边形 -->
    <polygon points="250,30 270,50 260,80 240,80 230,50" fill="blue" />
    <text x="250" y="100" text-anchor="middle" font-size="12">五边形</text>
    
    <!-- 六边形 -->
    <polygon points="320,40 340,30 360,40 360,70 340,80 320,70" fill="purple" />
    <text x="340" y="100" text-anchor="middle" font-size="12">六边形</text>
    
    <!-- 星形 -->
    <polygon points="80,150 90,180 120,180 98,200 105,230 80,215 55,230 62,200 40,180 70,180" fill="gold" />
    <text x="80" y="250" text-anchor="middle" font-size="12">星形</text>
    
    <!-- 箭头 -->
    <polygon points="200,150 220,140 220,145 250,145 250,155 220,155 220,160" fill="orange" />
    <text x="225" y="180" text-anchor="middle" font-size="12">箭头</text>
</svg>

折线元素(polyline)

折线使用<polyline>元素来定义，创建不封闭的多边形：

<!-- 折线示例 -->
<svg width="400" height="300" viewBox="0 0 400 300">
    <!-- 基本折线 -->
    <polyline points="30,30 80,60 130,30 180,80 230,30" 
              fill="none" stroke="red" stroke-width="3" />
    <text x="130" y="100" text-anchor="middle" font-size="12">基本折线</text>
    
    <!-- 填充折线 -->
    <polyline points="30,130 80,110 130,140 180,120 230,150" 
              fill="lightblue" stroke="blue" stroke-width="2" />
    <text x="130" y="170" text-anchor="middle" font-size="12">填充折线</text>
    
    <!-- 虚线折线 -->
    <polyline points="30,200 80,180 130,220 180,190 230,210" 
              fill="none" stroke="green" stroke-width="3" stroke-dasharray="8,4" />
    <text x="130" y="240" text-anchor="middle" font-size="12">虚线折线</text>
    
    <!-- 复杂折线 -->
    <polyline points="280,30 300,50 320,40 340,70 360,50 380,80 400,60" 
              fill="none" stroke="purple" stroke-width="2" stroke-linejoin="round" />
    <text x="340" y="100" text-anchor="middle" font-size="12">复杂折线</text>
</svg>

8.2.6 路径元素(path)

路径元素的基本语法

路径是SVG中最强大的图形元素，使用<path>元素和d属性来定义：

<!-- 基本路径 -->
<svg width="300" height="200" viewBox="0 0 300 200">
    <path d="M 50 50 L 150 50 L 150 150 L 50 150 Z" fill="lightblue" stroke="blue" stroke-width="2" />
</svg>

路径命令

路径使用一系列命令来定义图形的形状：

<!-- 路径命令示例 -->
<svg width="500" height="400" viewBox="0 0 500 400">
    <!-- 直线路径 -->
    <path d="M 30 30 L 130 30 L 130 80 L 30 80 Z" fill="red" />
    <text x="80" y="100" text-anchor="middle" font-size="12">直线路径</text>
    
    <!-- 曲线路径 -->
    <path d="M 180 30 Q 230 10 280 30 Q 230 50 180 30" fill="green" />
    <text x="230" y="60" text-anchor="middle" font-size="12">曲线路径</text>
    
    <!-- 弧线路径 -->
    <path d="M 350 30 A 30 30 0 0 1 410 30" fill="none" stroke="blue" stroke-width="3" />
    <text x="380" y="60" text-anchor="middle" font-size="12">弧线路径</text>
    
    <!-- 复杂路径 -->
    <path d="M 30 120 C 30 120 80 100 130 120 S 180 140 230 120" 
          fill="none" stroke="purple" stroke-width="3" />
    <text x="130" y="150" text-anchor="middle" font-size="12">复杂路径</text>
    
    <!-- 心形路径 -->
    <path d="M 80 200 C 80 190 70 180 60 180 C 50 180 40 190 40 200 C 40 210 50 220 80 240 C 110 220 120 210 120 200 C 120 190 110 180 100 180 C 90 180 80 190 80 200 Z" 
          fill="pink" stroke="red" stroke-width="2" />
    <text x="80" y="270" text-anchor="middle" font-size="12">心形路径</text>
    
    <!-- 波浪路径 -->
    <path d="M 200 200 Q 220 180 240 200 Q 260 220 280 200 Q 300 180 320 200 Q 340 220 360 200" 
          fill="none" stroke="orange" stroke-width="4" />
    <text x="280" y="230" text-anchor="middle" font-size="12">波浪路径</text>
</svg>

路径的高级用法

路径可以创建非常复杂的图形：

<!-- 路径高级用法 -->
<svg width="450" height="350" viewBox="0 0 450 350">
    <!-- 花朵图形 -->
    <path d="M 100 100 C 100 80 120 60 140 60 C 160 60 180 80 180 100 C 180 80 200 60 220 60 C 240 60 260 80 260 100 C 260 120 240 140 220 140 C 200 140 180 120 180 100 C 180 120 160 140 140 140 C 120 140 100 120 100 100 Z" 
          fill="pink" stroke="red" stroke-width="2" />
    <circle cx="180" cy="100" r="15" fill="yellow" />
    <text x="180" y="170" text-anchor="middle" font-size="12">花朵图形</text>
    
    <!-- 叶子图形 -->
    <path d="M 350 80 Q 370 60 390 80 Q 380 100 370 120 Q 360 100 350 80" 
          fill="lightgreen" stroke="green" stroke-width="2" />
    <text x="370" y="140" text-anchor="middle" font-size="12">叶子图形</text>
    
    <!-- 云朵图形 -->
    <path d="M 80 200 C 60 200 40 220 40 240 C 40 260 60 280 80 280 L 140 280 C 160 280 180 260 180 240 C 180 230 175 220 165 215 C 170 205 165 195 155 190 C 150 185 140 185 130 190 C 120 180 105 180 95 190 C 85 185 80 190 80 200 Z" 
          fill="lightblue" stroke="blue" stroke-width="2" />
    <text x="110" y="310" text-anchor="middle" font-size="12">云朵图形</text>
    
    <!-- 齿轮图形 -->
    <path d="M 350 200 L 360 190 L 370 200 L 380 190 L 390 200 L 400 190 L 410 200 L 420 190 L 430 200 L 420 210 L 410 220 L 400 210 L 390 220 L 380 210 L 370 220 L 360 210 L 350 220 L 340 210 L 350 200 Z" 
          fill="gray" stroke="black" stroke-width="2" />
    <circle cx="380" cy="205" r="8" fill="white" />
    <text x="380" y="240" text-anchor="middle" font-size="12">齿轮图形</text>
</svg>

8.2.7 图形组合和嵌套

图形组合

SVG基本图形可以组合使用创建复杂的图形：

<!-- 图形组合示例 -->
<svg width="450" height="300" viewBox="0 0 450 300">
    <!-- 房子图形 -->
    <g id="house">
        <!-- 房子主体 -->
        <rect x="50" y="80" width="80" height="60" fill="lightbrown" stroke="brown" stroke-width="2" />
        <!-- 屋顶 -->
        <polygon points="40,80 90,40 140,80" fill="red" />
        <!-- 门 -->
        <rect x="70" y="110" width="20" height="30" fill="brown" />
        <!-- 窗户 -->
        <rect x="100" y="100" width="15" height="15" fill="lightblue" />
        <!-- 烟囱 -->
        <rect x="110" y="45" width="8" height="25" fill="gray" />
    </g>
    <text x="90" y="170" text-anchor="middle" font-size="12">房子</text>
    
    <!-- 人物图形 -->
    <g id="person">
        <!-- 头部 -->
        <circle cx="230" cy="60" r="15" fill="peachpuff" />
        <!-- 身体 -->
        <rect x="222" y="75" width="16" height="40" fill="blue" />
        <!-- 手臂 -->
        <line x1="222" y1="85" x2="210" y2="95" stroke="peachpuff" stroke-width="4" />
        <line x1="238" y1="85" x2="250" y2="95" stroke="peachpuff" stroke-width="4" />
        <!-- 腿 -->
        <line x1="225" y1="115" x2="220" y2="140" stroke="blue" stroke-width="4" />
        <line x1="235" y1="115" x2="240" y2="140" stroke="blue" stroke-width="4" />
    </g>
    <text x="230" y="170" text-anchor="middle" font-size="12">人物</text>
    
    <!-- 太阳图形 -->
    <g id="sun">
        <!-- 太阳主体 -->
        <circle cx="370" cy="60" r="20" fill="yellow" />
        <!-- 太阳光线 -->
        <line x1="370" y1="25" x2="370" y2="35" stroke="orange" stroke-width="2" />
        <line x1="370" y1="85" x2="370" y2="95" stroke="orange" stroke-width="2" />
        <line x1="335" y1="60" x2="345" y2="60" stroke="orange" stroke-width="2" />
        <line x1="395" y1="60" x2="405" y2="60" stroke="orange" stroke-width="2" />
        <line x1="350" y1="40" x2="356" y2="46" stroke="orange" stroke-width="2" />
        <line x1="384" y1="74" x2="390" y2="80" stroke="orange" stroke-width="2" />
        <line x1="390" y1="40" x2="384" y2="46" stroke="orange" stroke-width="2" />
        <line x1="356" y1="74" x2="350" y2="80" stroke="orange" stroke-width="2" />
    </g>
    <text x="370" y="120" text-anchor="middle" font-size="12">太阳</text>
</svg>

图形的可访问性

为SVG图形添加可访问性标记：

<!-- 带有可访问性的图形组合 -->
<svg width="400" height="300" viewBox="0 0 400 300" 
     role="img" aria-labelledby="scene-title" aria-describedby="scene-desc">
    
    <title id="scene-title">简单场景图</title>
    <desc id="scene-desc">这是一个包含房子、树和太阳的简单场景图</desc>
    
    <!-- 房子 -->
    <g id="house-group" role="group" aria-label="房子">
        <rect x="50" y="120" width="60" height="50" fill="lightblue" stroke="blue" stroke-width="2" />
        <polygon points="40,120 80,80 120,120" fill="red" />
        <rect x="70" y="140" width="15" height="30" fill="brown" />
        <rect x="90" y="135" width="12" height="12" fill="yellow" />
    </g>
    
    <!-- 树 -->
    <g id="tree-group" role="group" aria-label="树">
        <rect x="195" y="140" width="10" height="30" fill="brown" />
        <circle cx="200" cy="130" r="20" fill="green" />
    </g>
    
    <!-- 太阳 -->
    <g id="sun-group" role="group" aria-label="太阳">
        <circle cx="320" cy="50" r="18" fill="yellow" />
        <path d="M 320 20 L 320 30 M 320 70 L 320 80 M 290 50 L 300 50 M 340 50 L 350 50 M 300 30 L 306 36 M 334 64 L 340 70 M 340 30 L 334 36 M 306 64 L 300 70" 
              stroke="orange" stroke-width="2" />
    </g>
    
    <!-- 地面 -->
    <rect x="0" y="170" width="400" height="130" fill="lightgreen" />
    
    <!-- 文本替代描述 -->
    <text x="200" y="210" text-anchor="middle" font-size="14" fill="darkgreen">
        美丽的乡村景色
    </text>
</svg>

本节要点回顾

• 矩形元素：使用rect元素，支持圆角、变换和各种样式
• 圆形元素：使用circle元素，通过cx、cy、r属性定义
• 椭圆元素：使用ellipse元素，通过rx、ry属性定义不同半径
• 线条元素：使用line元素，支持端点样式和虚线效果
• 多边形和折线：使用polygon和polyline元素创建复杂形状
• 路径元素：使用path元素和路径命令创建任意形状

相关学习资源

• MDN SVG基本形状
• W3C SVG图形元素
• SVG路径教程
• SVG图形实例
• 在线SVG路径编辑器

常见问题FAQ

Q: SVG图形和HTML元素有什么区别？

A: SVG图形是矢量图形，可以无限缩放而不失真；HTML元素是文档结构，用于内容布局。SVG图形使用数学描述，HTML元素使用盒模型。

Q: 如何选择使用哪种SVG基本图形？

A: 根据需要绘制的形状选择：简单矩形用rect，圆形用circle，椭圆用ellipse，直线用line，多边形用polygon，复杂形状用path。

Q: SVG路径的d属性如何理解？

A: d属性包含路径命令，如M(移动到)、L(直线到)、C(三次贝塞尔曲线)、Q(二次贝塞尔曲线)、A(弧线)、Z(闭合路径)等。

Q: 如何让SVG图形响应式显示？

A: 可以使用viewBox属性定义SVG的视口，通过CSS设置SVG的宽度为100%，或使用preserveAspectRatio属性控制缩放行为。

Q: SVG图形可以添加交互功能吗？

A: 是的，SVG图形可以添加事件监听器，使用CSS伪类(:hover等)，或通过JavaScript控制，实现点击、悬停等交互效果。

---

下一节预览：下一节我们将学习第8章第3节-SVG样式和效果，重点介绍如何为SVG图形添加填充、描边、渐变、滤镜等视觉效果。