编写 SVG 的指南

简介

Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径，图片和（或）文本组成，并能够在不失真的情况下任意变换尺寸。

本书主要介绍了内联SVG，它是指在HTML中编写的嵌入式代码，以便在浏览器中生成这些图形。

以这种方式使用SVG有许多优点，包括为了交互目的访问所有图形的各个部分，支持访问 SVG 文档构成的 DOM 节点树，查询、修改 DOM 节点的属性，提升用户可访问性。

先介绍基本组织和简单形状，再继续描述SVG坐标系或画布，然后用它绘制图形的内部和/或边框，变换，以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。

这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能，有助于你学习SVG。 它面向设计师和开发人员，希望以最可行的方式将SVG添加到他们的工作流程中。

从小笔画细节到开始使用手工制作的模式，本指南旨在成为一个围绕“go-to”编写SVG的参考。

前言

本“口袋指南”只针对已经有一些HTML和CSS基础的人，在你喜爱的浏览器中绘制SVG之前最好知道一些额外的知识, 例如：在SVG中正确渲染的信息，如何让你的图形更容易访问，以及何时何处使用矢量图形软件。

使用SVG

有许多方法可以把SVG插入到你的项目：内联、、、或者。我们主要介绍内联SVG的使用方法，包括如何在结构清晰的HTML文档中编写SVG代码。

尽管我们只是介绍了内联SVG的使用方法，但在某些特定情况下，其他方法也许会更好。例如，如果你不需要图形本身的编辑功能或访问其各个部分，则用标签可能更适合。

矢量图形软件

当你想要创建几乎不可能手写的更复杂的图形时，矢量图形软件更实用。你可以将Adobe Illustrator, Inkscape, Sketch, iDraw和 WebCode这些工具放到你的SVG技能包中。

可以用这些工具直接导出SVG代码并嵌入你的HTML。我们过一会再讨论这个。

Web中的内联SVG

为了简洁起见，SVG DOCTYPE，版本号，和在这本书中不会被提到。

这些属性专注于SVG的版本和文档的命名空间。只要记住这一点，你不需要这些属性就能成功地在浏览器中呈现图形。

如下面这个例子，在Illustrator生成的SVG代码时不要吃惊：

在大多数情况下，元素中的和属性不是必需的，可以删除，以缩减你的代码。

SVG用户可访问性

使用SVG可访问性是一个好习惯，但是为了简洁，描述和标题不会包含在整本书的代码中。

一旦你更熟练的写SVG，这些元素将使你的图形更能被用户接受。例如，元素中的内容允许你向屏幕阅读器的用户提供图形的详细描述。

由于SVG文本可以被检测和读取，并且可以容易地调整大小以适应特定的阅读偏好，提供了在可访问性方面优于传统的基于光栅的图像的巨大优势。

注意事项

使用之前一些更通用的注释：整本书的演示字体都可通过Google Fonts获得。虽然你可以通过看到这些字体显示出来，但你不会看到获取谷歌字体时使用的相关或。

示例始终使用像素和百分比作为单位标识符。 SVG支持的长度单位为：，，，，，，，和百分比。

本书中的SVG代码可以添加到任何文本编辑器，并且在任何支持内联SVG的浏览器中查看。通常情况下浏览器支持对于SVG非常强大，但是有更多高级的特性（例如渐变）时这种支持会变得弱一些。Can I Use是一个检查功能支持的实用网站，但实践才是检验真理的唯一方法。

你也可以复制代码，通过CodePen把它放在一个HTML部分，就能立即在屏幕上看到你的图形。我说的可能不够好，但它是我对SVG感兴趣的第一因素。练习，修改甚至失败是我最喜欢的学习方式。

最终，由于篇幅限制，一部分例子会有图形代码注释，其他不想关的将被省略。

第1节： 文档组织

SVG详细信息位于元素中。此元素中有几个属性，可以自定义你的图形画布。虽然这些属性对于呈现图像不是完全必要的，但是在跨浏览器执行时忽略它们可能使更复杂的图形易受攻击，并且使得它们容易不按预期进行呈现。

如上所述，内联图形可以“手动”编写，或者通过矢量图形软件生成的代码来嵌入。因为这些图形元素的顺序决定了它们的堆叠顺序，所以无论哪种方式，正确的组织和结构对于编写高效的SVG代码至关重要的。

组织和语义

SVG文档片段由元素中包含的任意数量的SVG元素组成。本文档中的组织是至关重要的。文档中的内容可以快速扩展，正确的组织提高了可访问性和效率，使作者和用户都受益。

本节将介绍编写SVG的关键 —— 元素 —— 并查看帮助初始文档设置的一些常见属性。

元素

元素归属于容器和结构元素，在文档内允许嵌套使用独立的SVG片段。每个独立的片段都有自己的坐标系。

此元素中使用的属性（如，，和）定义正在写入图形的画布。

当从某些矢量软件获得SVG代码时，在元素中有很多附加信息，例如SVG版本号（指示正在使用的SVG语言版本）和。正如我已经提到的，这些信息不会包括在本指南的示例中，缺少它们不会阻止你的图形在屏幕上呈现。

元素

元素是组合相关图形的容器元素。将此元素与描述和标题元素结合使用提供图形的相关信息，并将相关图形组件分在同一组在一起提高访问性。

此外，通过相关元素分在同一组，可以将它们看作一个整体与各个独立的部分。移动这些元素尤其方便，例如，可以移动整个组。

不包含在中的任何元素则认为有它们自己的组。

元素

元素允许您在整个文档中重复使用元素。此元素中可以包含其他属性，例如，，和，这些属性定义图形在坐标系中的详细映射位置。

在这里使用属性可以调用要重用的元素。例如，如果存在需要重新使用的苹果的图像的的的，则该图像可以由：。

这个元素作为一个重要的时间保护程序帮助压缩代码。

元素

虽然允许重用已经渲染的图形，但元素中的图形不会渲染到画布上，而是能够被引用，然后通过使用来渲染。

图形在中定义，然后可以通过引用该图形的在整个文档中使用。

例如，下面的代码绘制一个非常简单的矩形渐变：

除非引用其唯一的来调用，不然内容没有直观的输出，在这个实例中通过矩形的属性完成内容渲染。

元素

元素类似于，因为它提供了一种组元素的方法，但是，如果没有使用元素，中的元素没有可视化输出（如）。

它也不同于元素，建立自己的坐标系，与渲染的视口分开

SVG的和共同建立被映射的图形的坐标系统，将进一步介绍不同的部分。

堆叠顺序

HTML中的其他元素的堆叠顺序可以CSS中的操纵，但SVG不能。 SVG元素的堆叠顺序完全取决于它们在文档片段中的位置。

下面的葡萄和西瓜在同一个元素中。西瓜出现在葡萄前面，因为文档中包含组成西瓜的路径的组被列在葡萄之后。

如果包含葡萄的组被移动到文档的末尾，它将出现在西瓜的前面。

这种定型的堆叠顺序的方法也适用于组内的每一个元素。例如，将葡萄的茎的路径移动到组的末尾将导致茎在顶部。

第2节：基本图形和路径

当你需要在HTML中使用更复杂的内联SVG图形时就没有办法再手工编写了。那些更复杂的图形可以使用矢量软件创建，但现在我们来学习下手动编码的基础。

基本图形

SVG包含以下基本形状元素集：矩形，圆形，椭圆形，直线，折线和多边形。每个元素在渲染之前需要一些属性，如坐标和大小等详细信息。

矩形

元素定义一个矩形。

和属性确定矩形的大小，而则设置形状的内部颜色。数值默认为，当未指定时，将默认为。

其他属性还有和坐标。这些值将图形沿元素对应的轴移动相应的距离。

也可以通过指定和属性中的值来创建圆角。例如，将产生具有半径的角的水平边，以及具有半径的角的垂直边。

圆形

基于中心点和外半径设置元素。

和坐标建立圆的中心相对于由设置的工作空间尺寸的位置。

属性设置外半径的大小。

椭圆

元素基于中心点和两个半径定义椭圆。

当和值基于到SVG坐标空间中的像素距离建立中心点时，和值定义形状的边的半径。

直线

元素定义具有开始点和结束点的直线。

和值确定线的开始坐标，而和值确定线的结束坐标。

折线

元素定义了一组相连的直线段，通常构成开放形状（不连接的开始点和结束点）。

在整个形状中的值在和轴上建立形状的位置，并且在整个值列表中被分组为，。

不能使用奇数点。

多边形

元素定义由连接的线组成的闭合形状。

多边形形状的点通过八组的，值来定义。

该元素还可以根据点的数量产生其他闭合形状。

元素

SVG路径表示形状的轮廓。此形状可以填充，描边，并用于导航文本和/或用作剪切路径。

当涉及许多曲线时，这个路径会变得非常复杂。然而，理解工作原理和涉及的语法将有助于管理这些特定路径。

数据

路径数据包含在元素内的属性中，定义了形状的轮廓：。

属性中的这些数据说明了路径的，，，和指令。

下面的详细信息定义了青柠图形的路径细节：

命令（或）建立一个新的点，就像提起一支钢笔，并在纸上一个新位置绘制。包括路径数据的代码行必须以命令开始，如上面的例子所示。

命令跟在初始化路径之后，代表新子路径的开始和复合路径的创建。这里的大写字母表示绝对坐标，小写字母表示相对坐标。

（或）表示当前子路径的结束，并从该点到路径的初始点绘制直线。

如果之后紧跟着一个，这些坐标表示下一个子路径的开始。如果这个相同的之后是之外的任何东西，则下一个子路径从当前子路径的点开始。

这里大写或小写没有区别。

命令从当前点到新点绘制直线。

,

和命令从当前点绘制一条线到下一个提供的点坐标。这个新点然后变成当前点，以此类推。

大写表示绝对定位，而小写是相对定位。

,

和命令从当前点绘制水平线。

大写表示绝对定位，而小写是相对定位。

,

和命令从当前点绘制垂直线。

大写表示绝对定位，而小写是相对定位。

曲线命令

有三组命令绘制曲线路径：CubicBézier（，，，），二次贝塞尔（，，，）和椭圆弧（，）。

以下曲线部分将介绍每条曲线命令的基本概念，和映射的详细信息，然后提供一个图表供进一步了解。

Cubic Bézier

和CubicBézier命令从当前点绘制曲线，使用参数作为曲线开始处的控制点，作为结束处的控制点，定义形状细节曲线。

和命令还绘制立方贝塞尔曲线，但在这种情况下，存在第一控制点是第二控制点的反射的假设。

下面的代码绘制了一个基本的CubicBézier曲线：

该曲线的第一和最后一组值将影响其开始和结束位置，两个中心值将影响曲线本身在开始和结束时的形状和定位。

和命令也绘制立方贝塞尔曲线，但在这种情况下，假设第一个控制点是前一个命令的最后一个控制点的反映。则会作为相对于命令的开始点。

大写字母表示绝对定位，而小写字母是相对定位。和也是一样。

Quadratic Bézier

二次贝塞尔曲线（，，，）类似于立方贝塞尔曲线，除了它只有一个控制点。

以下代码绘制了一个基本的二次贝塞尔曲线：

操作第一个和最后一组值和会影响曲线起点和终点的位置。中心值集定义曲线的控制点，确定其形状。

和使用作为控件从初始点到终点绘制曲线。 和通过假设控制点是相对于新的或命令的开始点的先前列出的命令的控制的反映，从初始点到终点绘制曲线。

大写的表示绝对定位，而小写的是相对定位。和也是一样。

Elliptical Arc

椭圆弧（，）定义椭圆的线段。这些段通过或命令创建，通过指定起点，终点，和半径，旋转和方向创建弧。

下面是一个基本椭圆弧的代码：

该路径中的第一和最后一组值，和表示初始和最终坐标，而第二组值定义两个半径。 （大弧标志和顺时针标志）的值确定如何绘制圆弧，因为这里有四个不同的选项。

下图显示了四个弧选项以及大弧标志值和顺时针标志值对弧段的最终渲染的影响。

矢量软件嵌入

矢量图形软件可以制作更复杂的形状和路径，同时可以导出SVG代码在其他地方使用和操作。

一旦图形完成，生成的XML代码可以被复制并嵌入到HTML中，图形越复杂代码越长。分解SVG的每个部分并且运用适当的组织元素可以极大地帮助引导和理解这些复杂和冗长的代码。

这里是一些樱桃的SVG代码图像，添加了引导类：

元素中的属性定义工作区，或图形的“画布”。叶和茎在一个（组）内，而樱桃在另一个。数字字符串定义图形将采用的路径，和属性设置背景和边框的颜色。

将这个代码复制下来，它会通过一个SVG优化器在被放置在HTML之前，以助于消除不必要的代码和间距，进而大大缩小文件。 关于这个方面Peter Collingridge的SVG Optimiser和SVGO也是非常有用的工具。

第3节: 工作区域

或许SVG中最重要的方向是了解它的总结结构，以及如何创建基本图形，然而要掌握这些就需要掌握SVG的工作区，或者换句话说，图形将映射到工作区的坐标系统。

理解SVG的工作区有助于帮你更好的，更正确的呈现您的作品，但是一旦进入了高级的SVG特性时，这个就变得非常重要。例如，渐变和图案的映射需要严重的依赖已建立的坐标系统。这个工作区域主要由SVG的和属性来定义。

幸运的是，这个梨图形配置了相应的和：

点击这里查看Demo效果

整个梨在浏览器中都可见，但当发生变更时，这个梨的图形也将想应的会进行绽放。

是用来设置SVG可见区域。虽然SVG正如你期望的一样设置了或属性，但设置了将意味着图像中只有某个部分可以在SVG的工作区域可见。

通过元素的和属性可以设置。

如果这些值没有显式定义，那么的大小通常由SVG中的其他指标来决定，比如外面元素的宽高。只不过，离开这个不确定的地方（指的是不确定的SVG的），我们的图形（艺术作品）就很容易被截断。

允许你指定一组图形拉伸以适应特定的容器元素。这些值包括由逗号和空格分隔的四个数字：、、和，这些数字通常设置为的边界值。

值表示在的图形应该从哪个点开始，而和用来确定盒子的大小。

如果我们不显式的定义，那么图形将无法与设置的相匹配。

如果的和大小比梨图形各小，那么梨的可见部分就会减少，其剩下的部分则会缩放到的边界。

点击这里查看Demo效果

中的值定义了其父元素中的的原始值。换句话说，在中，你希望它匹配的开始点。在上面的梨图形中，值设置为（左上角）。让我们把这些值更改变：。

点击这里可以查看Demo效果

现在从轴的处开始，从轴的处开始。在改变这些值时，梨图形的部分已经改变了。

preserveAspectRatio

如果和不具备相同的宽高比例，则属性将指示浏览器如何显示图形。

有两个参数，和。第一个参数包含两个部分，并在中引导的对齐。第二个参数是可选的，并指出如何保持宽高比例。

preserveAspectRatio="xMaxYMax meet"

这些值将把的右下角对齐到的右下角。将会通过缩放来适应，从而保持宽高比例。

有三个选项：（默认值）、和。在满足确保图形（尽可能多）的可见性的同时，尝试用填充，然后将图形的任何部分切掉。不会宽高比，图形会在里扭曲。

也许这里最直接的值是，这表明不会有统一的缩放。如果我们增加的像素值，下面的樱桃图形将会拉伸不均匀，樱桃看起来会扭曲。

点击这里可以查看Demo效果

下图中的属性值设置为，它将的左下角和的左下角对齐。是确保图像在中尽可能的缩放。

点击这里查看Demo效果

当变为时，樱桃图形的效果：

点击这里可以查看Demo效果

注意，对象值并无关联。

点击这里查看Demo效果

上面的例子中的值为，这些樱桃现在没有沿着的轴的中间方向排列。

坐标系统变换

使用可以让SVG的图形做旋转、缩放、位移和扭曲等操作。SVG作者可以将应用于单个元素或整个元素组。

在元素中使用属性，将这些变换函数用于SVG元素中。这个属性中包含多个函数，言外之外你可以使用多个变形，例如：。

在操作SVG变形时有一点需要特别注意，它将会影响您的坐标系统或工作区。这是因为变形创建了一个新的用户空间，本质上是复制原来的，然后将变形放置在新的系统本身上。

下图演示了在包含图形的组中进行位移变形时发生的坐标系统变换。

坐标系统本身已经位移了，而酸橙(lime)和柠檬(lemon)的两个图像在各自的系统中保持了原来的位置。新的用户坐标系统在原来的坐标系统中的位置处。

由于坐标系统的关系，这些函数将会移动图形，即使你没有直接在它上面设置。例如，将的值设置为，将会试图将图形放大三倍，和的坐标都将会乘以，而图形与它一起缩放，在整个过程中就会移动它。

也允许变换嵌套，在这种情况之下，效果将会被累积在一起。因此，子元素的最终变换将基于在它之前的变换的累积。

函数指定一个图形的位移细节，两个数值直接指定图形在和轴上的位移：。这些值可以由空格或逗号分隔。

这里的值是可选的，如果忽略不设置，其值是。

的值将指定图形在其原点旋转的度数，而SVG的原点在左上角：。

这里还有一个选项，包括和的值：。如果提供了，这些值将建立一个新的旋转中心，而不是默认值。

下图是一个苹果未做旋转和旋转之后的效果：。注意，此图像并不反映该旋转所产生的坐标变换。

通过函数可以调整SVG图形的缩放。该函数接受一个或两个值，其中指定了元素在轴和轴上的缩放值：。

的值是可选的，如果未显式设置，它的值为，以确保正常调整图形大小。

的值如果是，图形将是原图形的一半大小，而的值将会把原图形放大三倍。如果是一个的值，图形的宽度是原图宽的四倍，高是原图高的两倍。

通过使用和可以让SVG元素扭曲。这两个函数中包含的值表示沿对应轴做适当的倾斜变换。

下图是苹果图莆添加值：前后的效果。注意，此图形不反映该变换所产生的坐标变化。

第4节: 填充和描边

和允许我们填充SVG和绘制其边框。

绘制(Paint)指的是通过和(或)给SVG图形添加颜色、渐变或图案等。

属性

属性就要用来绘制图形元素的内部。这个填充可以是纯色、渐变或图案。

图形内部是通过检查中列出的所有子路径和规范来确定的。

当填充一个形状或路径时，将会画出一条开放的路径，就像路径的第一个点连接最后一个点一样，即使路径上的颜色也不会被呈现。

属性表示用于确定画布中哪些部分在形状内部的算法。在使用更复杂的交叉或封装路径时，这并不那么简单。

其接受的值主要有：、和。

的值决定了画布内的一个点，通过这个点的任意方向上绘制一条线，然后再考虑穿过这条线另一个部分形状的位置。这将从零开始，并在每次路径段从左到右的时候添加一个路径，每次路径段从右到左的时候再减去一次。

如果在计算和计算这些交集之后得到的结果是零，那么这个点就在路径之外，否则它就在里面。

从本质上讲，如果将内部路径按顺时针方向画，它将被认为是内（），但如果按逆时针方向画，则会被讷为是外（），因此被排除在绘制之外。

的值决定了画布上一个区域的内部，通过在任何方向上通过整个形状绘制一条线，并计算出线交叉的路径段。如果这个结果是奇数，那么这个点就在里面，如果是偶数，则这个点在外面。

考虑到的具体算法，内部图形绘制的方向是无关的，这个与非零不同的是，只是在计算它们穿过直线时的路径。

虽然这个属性通常不是必需的，但是它将允许更大的，用于控制一个复杂的图形，如上所述。

的值将引导元素接受其父元素指定的。

的值是指内部填充的不透明度。表示完全透明，表示不透明，两者之间的值代表了一个基于百分比的不透明度。

描边属性

在SVG中有许多与描边有关的属性，允许你在绘制图形时控制和操作描边的细节。这些属性提供的能力能让你更好的手工编写SVG代码，更好的控制绘制的图形。当需要对嵌入的图形进行编辑时，也能更方便的操作。

下面的例子使用了内联的SVG，绘制了一个葡萄。被使用的属性直接在图形元素当中。

属性定义了特定图形和路径的边框。

比如下面的葡萄图形有一个紫色的描边效果：：

点击这里可以查看Demo效果

值设置了描边的粗累，比如使用此属性设置葡萄描边的粗细，如上图的紫色葡萄，它的值就设置了。

该属性的默认值为。如果使用百分比值，将会基于的尺寸来进行计算。

定义了开放路径的终点（也称为线帽），其有四个值：、、和。

的值将指定元素继承其父元素指定的。

下图是葡萄茎图形的设置为的效果：

点击这里查看Demo效果

定义了路径和基本形状连接处的风格。

下面使用定义了葡萄形状连接处的风格为：

点击这里查看Demo效果

当两条线相交于成一个角，并设置为，其中属性允许指定这个角延伸的距离。

这个连接的长度被称为长度，它是从线的内角连接到外端的距离。

这个值是指长度受的限制。

这个属性的最小的可能值是。

第一个葡萄图形设置了，这将产生了一个斜角效果。第二个葡萄的图形设置了。

点击这里可以查看Demo效果

属性把路径变成了破折线，而不是实线。

在这个属性中，您可以指定破折线的长度，使用逗号或空格来分隔破折号之间的距离。

如果提供的值是奇数值，表示该列表值将会重复，以产生偶数个数值。比如将变成，如下图所示。

在这个值中只放置一个数字，就会在破折线之间的空间中产生等于相同长度的破折线。

点击这里查看Demo效果

第一个葡萄图形展示了一个偶数值时的葡萄图形效果：。

属性用来指定破折号之间的距离。

点击这里查看Demo效果

在上面的例子中，破折线设置了长度，以及的值设置为。在路径的起始点，在到的破折线将不会出现，这就是为什么第一个破折号显得更短。

属性用来设置描边的透明度。

他的值是到之间，其中是表示描边完全透明，不可见。

第5节: 元素

元素定义了由文本组成的图形。有许多属性选项可以定制文本图形，而且渐变、图案、剪切路径、蒙板和过滤器也可以应用在元素之上。

SVG提供了能力强大的元素，用于创建可伸缩的文本作为图形，而且易于在SVG代码中修改和编辑。

在使用本节中提到的示例时，要特别注意尺寸。正如前面提到的，将决定SVG的可见部分，有时有必要根据修改的细节来更改。

基本属性

SVG的文本属性位于元素内，该元素放置在元素内。通过这些属性，可以控制文本的一些基本样式，并在画布上完全呈现其映射的细节，从而完全控制它在屏幕上的效果。

, , ,

元素中的第一个字母是根据已创建的坐标系统中的和值来呈现的。值决定了文本在轴上开始位置处，而值决定了文本底部的水平位置。

和在坐标系统中是绝对坐标，而和是相对坐标。当与元素一起使用时，这一点特别方便，这将在接下来的部分中进行讨论。

点击这里可以查看Demo效果

上面的文本距SVG的中左侧距离，而文本底部则从顶部处。即：。

可以将旋转放置在单个字母（字符）或者整个元素上。

属性中的单个值会导致每个符号在该值上旋转。一系列值也可以用于文本的每个字母，并为每个字母分配不同的旋转值。如果没有足够的值来匹配字母的数量，最后一个值将为其他字母设置旋转。

下面的文本通过给每个文本设置旋转效果，每个字母的旋转的值： 。

点击这里查看Demo效果

和

属性指定文本的长度。文本的长度将通过改变所提供的字符之间的空格来适应该属性中指定的长度。

下面的例子有一个值为。得注意的是，字符之间的间距增加了，以填充这个空间。

点击这里查看Demo效果

当和属性一起使用时，可以指定字母间距和字形大小都应该调整以适应这些新的长度值。

的值与上面的例子类似，在上面的例子中，字符的间距扩大到填充空间：。

的值指定了间距和字形的大小来做相应的调整：。

点击这里查看Demo效果

元素

元素很重要，因为SVG目前不支持自动换行。允许我们通过将某些单词或字符单独进行操，用来绘制多行文本。

而不是为这些额外的行定义一个新的坐标系统，元素将这些新的文本行与上一行的文本关联起来。

元素本身并不会输出可见的的东西，但是通过在元素中指定更多的细节，我们可以将该文本单独输出，并对其设计和定位有更多的控制。

在下面的示例中，和位于元素的元素中。通过在每个中的，可以将这个词沿着轴与前面的词关联起来。

虽然的位置在的位置处，但的位置是。

点击这里查看Demo效果

你还可以通过一个列表值单独移二甲双胍每个字母，如下面的示例所示。字母和符号随后根据字母和符号的位置移动，现在根据中的位置定位。

点击这里查看Demo效果

包含的有以下值：。

间距属性

当在内联SVG中使用元素来控制单词和字母的间距时，可以使用许多属性，类似于矢量图形软件的功能。

了解如何使用这些属性有助于确保图形完全按照预期显示。

和

指的是调整字符间距的过程。属性允许我们根据使用的字体中包含的来调整这个空间，或者设置一个独特的长度。

值表示字形间距应该基于所使用的字体中包含的列表。

下面的例子中的值为，在这个示例中，它没有可见的影响，因为它是默认值。

调整这些字符之间的长度可以简单地包括一个数值：。

的值也是有效的。

的值有、和。这里的数值与的间距有相同的效果。的属性是已经从生效的补充间距。

属性是用来指定单词之间的间距。

其他有效的值还包括(默认值)和。

属性允许在SVG的文本图形上添加下划线，其值包括：、和。

虽然绘制图形的顺序并不总是会对SVG图形输出产生影响，但是方面顺序确实很重要。所有值（除了之外），应该在文本填充和描边之前使用这个属性。

应该在文本填充或描边后绘制，不然将会在文本的顶部呈现。

下面的效果是使用了和。

沿着路径的文本

正如前面提到的，内联SVG为我们提供了与矢量图形软件类似的高级定制选项。在SVG代码中，我们可以准确定位文本，就像我们希望它在屏幕上显示一样。

在进一步处理此操作时，SVG的可以根据元素，指定文本根据路径呈现文本。

元素

元素是这个特性所有魔法所在。虽然SVG的文本在元素内，而元素在元素内。

这个元素将调用所选择的路径，它在元素中等待被使用。

基本语法如下：

下面是代码中使用的向量路径：

在矢量图形软件中生成此路径后，SVG的元素代码本身（不包括如上所示的颜色），可以在中复制并放置在中，同时也显示在上面的代码中。

是的属性，允许我们引用文本根据指定的路径呈现。

属性表示从开始时的文本偏移长度。的值表示的起始点，而表示终点。

下面的例子有一个的，它推动文本在路径的处开始。当移动时，字体大小已经减少，以防止它从中呈现出来。

通过元素添加路径的描边颜色，可以帮助我们理解这里发生的事情。

点击这里查看Demo效果

第6节: 高级特性——渐变，图案，剪辑路径

渐变

SVG渐变有两种类型：线性渐变和径向渐变。线性渐变是在直线上产生的，而径向渐变是圆形的。

一个非常简单的线性渐变就像下面这样：

包含一个元素，允许我们创建可重用的声明，以便稍后调用。这些定义输出用户并不可见，下到它们在描边或填充中被使用唯一的时，才会在SVG的图形或中被调用。这些图形或文本在元素中，但在元素之外。

一旦建立了一个渐变并分配一个，它就可以通过SVG中的或属性来调用。例如：。

线性渐变

线性渐变沿着一条直线改变颜色，在这个直线上定义的每个点将代表元素内关联颜色。在每一个点上，颜色都是的饱和，中间的空间表示从一种颜色过渡到下一种颜色。

停止节点

节点可以使用来设置透明度。

下面是一个简单的线性渐变的示例代码，应用于矩形的两个颜色的线性渐变：

用来指定线性渐变的的位置。

, , ,

，，和属性值表示渐变停止（颜色变化）映射的开始和结束点。这些百分数将沿适当的轴分别绘制渐变。

的的值和的值将产生水平渐变，反之则会产生垂直渐变。将两个值设置为（或之外的任何值）将会创建一个倾斜的渐变。

属性定义了、、和值的坐标系统。这里有两个选项：或 。使用的是坐标系统中的绝对单元值，而（默认值）在SVG图形本身的范围建立这个系统（相对坐标值）。

属性的值指定渐变如何在目标范围内展开或结束。如果渐变不在图形的填充中使用，将会决定渐变应该如何覆盖那个空白区域。这里有三个值可选：、和。

（默认值）的值指定渐变的第一个和最后一个颜色在未被发现的目标区域的其余部分展开。的值指定渐变从一开始就重复使用这个模式。的值指定渐变的从开始到结束的渐变模式，连续不断的执行。

下面的渐变的开始和结束点是：。

属性是可选的，并允许给渐变添加旋转等功能。

属性允许你调用另一个渐变的所有的信息，但你也可以包含不同的值。

渐变从本节点开始就继承了第一个渐变的细节，但是有一个值。

径向渐变

的大多数属性与相同，除非有不同的坐标系统。

, ,

，和属性定义了圆的最外层，而渐变的的将这个值映射到圆的周长上。和定义了径向渐变的圆心，而则是设置径向渐变的半径。

,

和属性代表了渐变的焦点，或者说是最内层圆的坐标。本质上，渐变的中心不需要它的焦点，可以用这些值来改变它。

默认情况下，径向渐变的焦点将能圆的中心为中心，焦点属性可以改变这一点。以下图像的焦点值为：：

Cherry

在这个示例中，焦点转移到图像的右下角。

图案

图案通常被认为是用和来给SVG图形来填充或描边更复杂的图形。理解图案的基本语法可以使这些看起来复杂的图案变得更容易。

下面是用于图案来填充矩形的基本语法：

基本属性

图案的属性和值定义了画布、设计和整体位置。图案可以由路径或图形组成，可以绘制文本，甚至可以嵌套在另一个图案中。

, , ,

元素的和属性定义了图案从图形哪个位置开始。在元素内使用和定义了图案的宽度和高度。

上面引用的包含了。表示从轴的，轴的处开始，创建一个的宽和的高的画布。

属性定义了、、和所引用的坐标。这里有两个选项：和（默认值）。

在图案坐标系统由引用元素的坐标系统决定，而则建立映射坐标系统基于该图案所应用的元素的容器。

属性的值与的值相同，只是现在为图案本身的内容定义了坐标系统。

与不同，这个值默认为，这意味着除非其中一个或两个属性被指定为中所绘制的形状，否则它们将被绘制在不同的坐标系统中，而不是元素所使用的。

在元素中定义简化了这个过程，并确保了一个一致的工作区域。

图案嵌套

图案也可以嵌套，以创建更加独特和详细的设计。

下面是图案嵌套的一个基本结构：

元素包含两个模式。在中，矩形的图案是通过来调用圆形图案，而主矩形则通过来调用矩形图案，并将主矩形的内部绘制成嵌套的图案。

剪切路径

剪切咱径限制了将绘制图形应用到SVG的区域。在剪切路径设置的范围之外的任何区域都不会被渲染。

为了演示这个功能的特性，让我们使用一个包含文本的裁剪路径，它被应用于一个番茄矩形和绿色圆圈。

下面是没有使用剪切路径的图形，设置超出的范围。

现在，我们来看看文本应用于画布的代码：

Apples

剪切路径在元素中定义，然后通过引用其唯一的来调用这两个形状。

总结

编写内联SVG是一个非常有用的编辑功能，并使用我们能够独立地访问所有图形元素。在这段代码中，我们生成的图形在不丢失图像质量的情况下，可以增加搜索功能和增强可访问性。

它可能需要我们花一些时间掌握修改SVG的能力，但一旦你掌握了这些能力，并且使你的代码尽可能的短和高效，那么就可以开始去探索SMIL动画和尝试用CSS给SVG元素添加样式。

希望这个指南有一定的参考价值，也能让你理解和操作内联SVG提供一定的灵感。