以下是一个简单的SVG示例：

SVG

这段代码创建了一个400×200的画布，其中包含一个蓝色矩形、一个红色圆形和一段文字。

SVG元素采用嵌套结构组织内容，浏览器按照文档中的绘制顺序渲染图形。通常，后出现的图形会覆盖先出现的图形。

2. viewBox与坐标系统

viewBox是SVG中非常重要的属性，它定义了图形内部的坐标范围。

例如：

SVG

该SVG的实际显示尺寸为800×400，而内部坐标范围为400×200。

浏览器会将内部坐标映射到实际显示区域，使图形整体放大两倍。

viewBox的基本格式为：

viewBox="min-x min-y width height"

其中：

• min-x：内部坐标系的横向起点。

• min-y：内部坐标系的纵向起点。

• width：内部坐标系的宽度。

• height：内部坐标系的高度。

合理设置viewBox，可以让SVG适应不同尺寸的容器，减少针对不同屏幕重复绘制图形的工作量。

3. SVG与CSS的关系

SVG元素可以通过属性设置样式，也可以使用CSS进行统一管理。

例如：

HTML


 width="200" height="150"
     viewBox="0 0 200 150">
     class="shape"
          x="30" y="20"
          width="140" height="100"
          rx="10" />

这种方式将图形结构与视觉样式分离，使代码更加清晰。

对于复杂SVG项目，建议使用CSS类管理颜色、边框、字体和动画效果，以提高代码的可维护性。

二、SVG常见图形绘制方法

SVG提供了多种基础图形元素，能够满足大部分二维矢量图形绘制需求。

常见元素包括矩形、圆形、椭圆、直线、多段线、多边形和路径。

1. 矩形绘制

用于绘制矩形，其主要属性包括：

示例代码：

SVG

通过设置rx和ry，可以绘制圆角矩形，适用于按钮、卡片、信息面板等界面组件。

2. 圆形与椭圆绘制

圆形通过元素定义，核心属性为圆心坐标和半径。

SVG

其中：

• cx：圆心的横坐标。

• cy：圆心的纵坐标。

• r：圆的半径。

椭圆使用元素，通过水平半径rx和垂直半径ry控制形状。

HTML
 cx="150" cy="90"
         rx="100" ry="50"
         fill="#58D68D" />

圆形和椭圆常用于绘制图表节点、装饰图案、流程节点以及简单的示意图。

3. 直线与折线绘制

用于绘制连接两个点的直线。

HTML
 x1="20" y1="20"
      x2="250" y2="150"
      stroke="#34495E"
      stroke-width="4" />

其中，x1、y1表示起点坐标，x2、y2表示终点坐标。

如果需要连接多个点，可以使用：

HTML

    points="20,150 80,60 140,120 220,30"
    fill="none"
    stroke="#E74C3C"
    stroke-width="4"
    stroke-linejoin="round"
    stroke-linecap="round" />

按照坐标顺序连接各个点，但不会自动闭合路径。

如果需要构建封闭的多边形，可以使用：

HTML

    points="150,20 270,150 30,150"
    fill="#F4D03F"
    stroke="#B7950B"
    stroke-width="3" />

多边形常用于绘制三角形、箭头、徽标和几何装饰图形。

4. 使用path绘制复杂图形

是SVG中功能最强大的图形元素之一，可以通过路径指令绘制直线、曲线和复杂轮廓。

常用路径指令如下：

例如，使用路径绘制一个简单的心形：

SVG

路径指令能够灵活组合，因此复杂图标、曲线图、地图轮廓和不规则装饰图形通常都可以通过实现。

需要注意的是，大量复杂路径会增加渲染和维护成本。对于规则几何图形，优先使用专用元素通常更加直观。

三、SVG图形样式与视觉效果控制

SVG不仅支持基础图形绘制，还可以通过填充、描边、渐变、透明度和滤镜等功能实现丰富的视觉效果。

1. 填充与描边

fill用于设置图形内部的填充颜色，stroke用于设置图形轮廓颜色。

SVG

常见样式属性包括：

• fill：填充颜色。

• stroke：描边颜色。

• stroke-width：描边宽度。

• stroke-linecap：线段端点样式。

• stroke-linejoin：线段连接处的样式。

• fill-opacity：填充透明度。

• stroke-opacity：描边透明度。

如果希望图形没有填充，可以设置：

HTML
fill="none"

这种方式常用于绘制线框图标和边界轮廓。

2. 渐变填充

SVG支持线性渐变和径向渐变，可以通过定义渐变资源，再由图形引用。

线性渐变示例：

SVG

通过起点、终点和颜色节点控制渐变方向与颜色变化。

径向渐变则以中心区域向外扩散的方式呈现颜色过渡，适合绘制光照效果、球体和装饰性背景。

3. 图形变换

SVG提供了transform属性，可以对图形执行平移、旋转、缩放和倾斜操作。

常用变换函数包括：

示例：

SVG

这里将矩形围绕坐标点(130, 85)旋转30度。

合理使用图形变换，可以减少重复定义图形的工作量，适用于图标布局、动态图形和复杂图形组合。

四、SVG文本展示的基本原理

文本展示是SVG的重要组成部分。与普通HTML文本不同，SVG文本具有明确的图形坐标属性，可以精确控制文字的位置、对齐方式和排版方向。

SVG主要通过元素展示文本，并使用实现局部样式调整和分段定位。

1. 使用text元素展示文字

是SVG文本展示的核心元素。

SVG

其中：

• x：文字起始位置的横坐标。

• y：文字基线的纵坐标。

• font-size：文字大小。

• fill：文字填充颜色。

• text-anchor：文本的水平对齐方式。

需要特别注意，SVG的y坐标通常对应文字基线，而不是文本框的顶部。

如果希望文字位于画布中央，可以将text-anchor设置为middle，并结合适当的基线定位方式进行调整。

2. 文本水平对齐方式

SVG的text-anchor属性用于控制文本相对于定位点的水平对齐方式。

支持的主要取值包括：

例如：

SVG

需要注意，start和end的实际方向会受到文本方向设置的影响。对于中文网页，通常使用默认的从左向右文本方向即可。

3. 字体样式设置

SVG文本可以使用CSS控制字体、字号、字重和装饰效果。

SVG

常见的字体相关属性包括：

• font-family：字体系列。

• font-size：字体大小。

• font-weight：字体粗细。

• font-style：字体样式。

• text-decoration：文本装饰。

• letter-spacing：字符间距。

• word-spacing：单词间距。

对于中文文本，建议优先选择适合中文显示的字体，并设置合理的备用字体列表，避免不同操作系统出现字体缺失或排版差异。

五、使用tspan实现文本分段与局部样式控制

当一段SVG文本需要使用不同的颜色、字号或位置时，可以通过元素进行分段控制。

通常嵌套在元素内部，可以继承父元素的样式，也可以单独设置属性。

1. 实现同一行文字的多种样式

SVG

这段代码通过三个tspan分别设置不同的颜色，使同一行文本具有丰富的视觉层次。

这种方式适合强调关键词、制作彩色标题和设计信息图表中的标签。

2. 使用tspan控制文本位置

还可以通过x、y、dx和dy等属性控制文字位置。

SVG

其中：

• x：重新指定文本的横坐标。

• y：重新指定文本的纵坐标。

• dx：在当前位置基础上进行水平偏移。

• dy：在当前位置基础上进行垂直偏移。

需要注意，dy表示相对偏移量，而不是固定的绝对坐标。合理组合这些属性，可以实现简单的多行文本布局。

3. tspan与普通换行的区别

SVG的元素不会像HTML中的普通段落那样自动进行多行排版。

如果直接在文本内容中插入换行符，通常不会得到预期的换行效果。

对于简单的多行文字，可以使用多个tspan配合dy属性实现换行。

如果需要更复杂的自动换行、段落布局或响应式文本排版，可以考虑使用HTML文本元素，或者通过JavaScript计算文本宽度并动态生成多个文本行。

六、SVG文本路径与特殊排版技术

SVG除了支持普通水平文本，还可以将文字沿着指定路径排列，实现弧形标题、环形文字和曲线标注等效果。

这一功能主要通过元素实现。

1. 沿路径排列文字

首先定义一条路径，然后通过引用路径的ID。

SVG

这段代码通过二次贝塞尔曲线定义了一条弧形路径，并将文字沿路径排列。

textPath的常见属性包括：

• href：引用目标路径的ID。

• startOffset：控制文本在路径上的起始偏移位置。

• text-anchor：控制文本相对于定位点的对齐方式。

在较新的SVG实现中，href是常用写法。旧版代码可能使用xlink:href，但现代项目通常可以直接使用href。

2. 实现圆形文字排版

通过圆弧路径，可以实现文字环绕圆形排列的效果。

SVG

圆形文本常用于徽章、品牌标识、印章图案和装饰性图形。

实际使用时，需要根据文字长度、路径长度和字体大小调整起始偏移位置，避免文字超出路径范围。

七、SVG文本与图形组合的实战案例

SVG图形与文本通常需要协同使用，例如流程图、数据可视化图表、仪表盘和交互式信息卡片等。

下面通过一个简单的流程节点示例，说明如何将图形绘制与文本展示结合起来。

1. 创建带文字的流程节点

SVG

该示例将矩形、文本、直线和多边形组合起来，构建了一个简单的流程图。

实际开发中，可以进一步封装节点组件，通过参数控制节点位置、文字内容和颜色，实现可复用的流程图绘制系统。

2. 使用g元素组织图形

当多个SVG元素需要作为一个整体进行管理时，可以使用元素进行分组。

SVG

元素可以统一应用变换、样式和部分事件处理逻辑。

对于包含大量图形和文本的SVG文档，合理分组能够使结构更加清晰，便于后续维护和交互控制。

八、通过JavaScript实现SVG动态绘制

SVG可以与JavaScript结合，实现动态图形生成、数据更新和交互式操作。

对于需要根据业务数据动态生成的图表或流程图，可以使用DOM API创建SVG元素。

1. 动态创建SVG图形

以下示例展示如何使用JavaScript创建一个矩形和对应的文本。

SVG

这里需要使用document.createElementNS()创建SVG元素，而不是直接使用普通的document.createElement()。

原因在于SVG属于独立的XML命名空间，使用正确的命名空间能够确保浏览器按照SVG元素进行解析和渲染。

2. 根据数据动态绘制柱状图

SVG适合绘制简单的数据可视化图表。下面以柱状图为例，展示如何根据数组中的数据动态生成矩形。

SVG

该示例根据数组数据生成柱状图，并在每个柱体上方显示对应数值。

实际开发时，还需要根据数据最大值计算纵向缩放比例，并为坐标轴、标签和图表边距预留空间，避免数据变化后出现显示溢出。

九、SVG交互与动画效果实现

SVG元素可以监听鼠标、触摸和键盘相关事件，也可以通过CSS动画和JavaScript实现动态效果。

1. 鼠标交互

通过事件监听器，可以让SVG图形响应用户操作。

SVG

当鼠标进入矩形区域时，图形变为绿色；鼠标离开后恢复蓝色。

类似的交互方式适用于图表高亮、流程节点提示和可点击图标。

2. 使用CSS实现动画

SVG元素可以通过CSS的transition和animation实现平滑变化。

HTML


 width="300" height="200"
     viewBox="0 0 300 200">

     class="animated-circle"
            cx="150" cy="100"
            r="50" />

这里通过CSS过渡效果实现圆形的缩放和颜色变化。

对于需要复杂时间轴控制、连续动画或数据驱动动画的场景，可以结合JavaScript动画接口进行实现。

十、SVG绘制与文本展示中的常见问题

实际开发中，SVG图形和文本可能受到坐标系统、字体环境、布局方式以及浏览器兼容性等因素影响。

掌握常见问题的排查方法，可以有效提高开发效率。

1. SVG图形显示不完整

图形被裁剪通常与画布尺寸、viewBox范围或元素位置有关。

排查时可以重点检查：

• 图形坐标是否超出viewBox定义的范围。

• width和height是否设置合理。

• 是否存在overflow或裁剪路径设置。

• 图形是否被其他元素覆盖。

如果图形需要适应不同尺寸的容器，可以合理设置viewBox，并根据布局需求调整宽高比例。

2. SVG文本位置偏移

SVG文本的位置通常以基线为参考，而不是文本框顶部。

因此，设置y坐标时需要考虑字体的实际高度和基线位置。

对于图形中的居中文本，可以结合以下属性进行调整：

HTML
 x="150" y="100"
      text-anchor="middle"
      dominant-baseline="middle">
    居中文本

text-anchor用于控制水平对齐，dominant-baseline用于控制文本基线的对齐方式。

需要注意，不同字体和浏览器的字体度量可能存在差异。如果要求文字在不同环境下精确对齐，应结合实际字体和目标浏览器进行测试。

3. 中文文本显示异常

中文文本出现乱码、缺字或字体不一致，通常与字符编码和字体支持有关。

可以从以下几个方面排查：

1. HTML文档使用UTF-8编码。

2. SVG文件本身采用正确的字符编码。

3. 设置合适的中文字体及备用字体。

4. 检查目标设备是否安装了指定字体。

5. 避免依赖未经确认的特殊字体。

例如：

HTML
 x="30" y="80"
      font-family="Arial, 'Microsoft YaHei', sans-serif"
      font-size="24">
    中文SVG文本

对于需要跨平台展示的项目，应尽量使用常见字体，并在不同操作系统和浏览器中进行测试。

4. SVG文本无法自动换行

SVG的元素默认不会像HTML段落那样自动根据容器宽度换行。

如果需要多行文本，可以通过多个tspan指定不同的纵向位置，也可以借助JavaScript计算文本宽度并动态生成文本行。

对于大段说明文字、文章内容或复杂段落布局，通常更适合使用HTML文本元素，而不是将所有文字绘制到SVG中。

5. SVG图形在不同设备上显示比例不一致

SVG通常具有良好的缩放能力，但如果viewBox、容器宽高和preserveAspectRatio设置不合理，图形仍可能出现留白、裁剪或比例变化。

例如：

SVG

preserveAspectRatio用于控制内部坐标系与显示区域之间的缩放和对齐关系。

常见的meet模式会尽量完整显示图形，而slice模式则会优先填满显示区域，必要时裁剪部分内容。

十一、SVG性能优化与开发实践

当SVG包含大量图形、复杂路径或动态文本时，合理的结构设计和渲染优化能够显著改善页面表现。

1. 减少不必要的图形元素

过多的SVG节点会增加DOM管理和渲染成本。

优化时可以考虑：

• 合并重复的路径。

• 删除无用的装饰元素。

• 避免重复定义相同的图形结构。

• 对重复图形使用和进行复用。

• 减少不必要的嵌套分组。

例如：

SVG

通过定义可复用的symbol，可以减少重复书写相同图形结构的工作量。

2. 合理使用CSS样式

对于包含大量图形的SVG，建议通过CSS类统一管理颜色、字体和描边样式。

这种方式不仅便于维护，也有助于减少重复的属性定义。

不过，CSS类本身并不能保证所有场景下的渲染性能都得到提升。实际效果还取决于元素数量、样式复杂度和浏览器实现。

3. 控制复杂路径与滤镜使用

复杂的贝塞尔曲线、模糊滤镜和阴影效果可能增加渲染开销。

优化时可以：

• 简化不必要的路径控制点。

• 避免对大量元素重复应用复杂滤镜。

• 限制阴影和模糊效果的作用范围。

• 对高频更新的图形减少复杂视觉效果。

• 根据实际设备性能调整图形复杂度。

对于需要实时更新的大型图表，建议通过性能测试确定合适的图形结构，而不是单纯依赖减少代码行数。

4. 兼顾SVG文本的可访问性

SVG文本不仅承担视觉展示功能，还可能包含图表说明、按钮标签和交互提示。

为了提升可访问性，可以考虑以下做法：

• 为重要图形提供清晰的文本说明。

• 为交互元素设置可识别的标签。

• 确保文字与背景之间具有足够的颜色对比度。

• 避免仅通过颜色传递关键信息。

• 对复杂图表提供额外的文字描述或数据表格。

对于具有独立含义的SVG图形，可以结合