SVG：使用线条创建简单和复杂的形状

线条是 svg 中的基本形状。 它可用于创建简单的形状，例如直线、三角形或更复杂的形状。 一条线也可以用作路径。 路径是一系列连接的线。

因为它们比标准形状更强大、更灵活，所以它们可以用来创造任何东西。 路径元素包含可用于定义路径的各种命令和坐标。 路径定义 (d) 允许您移动到新点并使用命令行绘制不同的直线和曲线。 可以使用五行命令之一创建路径。 这篇文章将使用内联 SVG 作为代码。 首先，路径定义如下：x=50 和 y=50 (M 50 50 50)。 在下一行中，我们使用字母 l (l 0 300) 作为小写字母。

0 300 的相对坐标是从当前点（50 50）绘制到这些命令。 如以下示例所示，我们将中间的三个 lineto 命令替换为水平和垂直命令。 因为没有指定坐标，所以不必指定最后一组坐标。 第二种选择是在每个命令后使用逗号分隔坐标 x 和 y。 空格可用于使每个命令和路径数据更加可见。 路径命令比前面章节中的简单形状要通用得多。 从第一个示例开始，可以使用 lineto 命令构建路径。 每个路径命令都可以有自己的执行行，你可以使用更多的空格。 创建两条看似断开的线路就像一个命令一样简单。

路径在 SVG 中使用“路径”元素定义。 每个基本形状都是根据它的等效路径来描述的，这就是它的形状。 路径只是路径本身，而不是元素的路径。

两点必须通过元素（例如 line> 元素）连接才能在 SVG 中创建线条。

是否可以在 Svg 中绘制任何路径？

是的，可以在 SVG 中绘制任何路径。 SVG 在绘制路径方面提供了很大的自由度。 您可以使用各种路径命令来创建您想要的任何类型的形状。

以下是路径命令的列表：moveto、lineto、curveto（三次贝塞尔曲线和二次贝塞尔曲线）、arcs 和 closepaths。 复合路径（即具有多个子路径的路径）允许使用环形孔修改对象。 本章介绍 SVG 路径的语法、行为和 DOM 接口。 路径数据命令后跟一系列命令，后跟一个字符。 路径数据有一个简单的语法，允许它以更少的空间和更少的努力下载文件。 由于存在换行符，可以将路径数据分成多行以使其更易于阅读。 使用标记时，它们内部属性中的换行符将被规范化为空格字符。

路径数据字符串指定可用作值字符串的形状。 下面的步骤将帮助您根据路径数据错误处理部分处理字符串中的错误。 如果有，则路径数据段之前必须有 moveto 命令。 从当前子路径开始的点到子路径结束的点绘制一条自动直线。 在这种情况下，长度为零的路径段将是合适的。 使用 closepath 方法时，子路径的末尾使用当前使用的“stroke-linejoin”值连接到第一段的开头。 开放子路径的行为方式与封闭子路径相同，但路径段不重叠。

当前不支持 Python 中用于段完成的关闭路径操作。 从当前点到新点，各种 lineto 命令绘制直线。 如果你命令一个相对 l 命令，你可以得到一条线的确切终点 (cpy x)。 在正 x 轴的方向上，正 x 值的相对 h 命令创建一条水平线。 前五个示例提供了三次贝塞尔路径段的概述。 以下是四个椭圆弧命令。 当使用相对命令绘制圆弧时，cpy x 是圆弧的终点(cpx x, cpy y)。

large-arc-flag 和 sweep-flag 表示绘制了四个弧中的哪一个。 EBNF 处理必须消耗尽可能多的给定产品，以便在角色不再满足产品要求后停止。 如果 d 属性的值为 none，则渲染将被禁用。 计算封口形状和选择标记时，将忽略线段边界处的默认方向。 rx 或 ry 为零的弧被视为将连接端点的直线段（lineto）。 该缩放程序可以在该缩放程序的数学公式的附录部分中找到。 没有长度的路径段不是无效的，在以下情况下它们可能会导致渲染问题。

为了允许用户代理按路径缩放距离计算，'pathLength' 属性可用于计算作者的总路径长度。 'path' 元素对于'moveto' 操作没有长度。 路径长度是通过选择多个“lineto”、“curveto”和“arcto”命令来计算的。

如何在 Svg 中绘制水平线？

要在 svg 中绘制一条水平线，您需要使用 'line' 元素。 'line' 元素需要两个属性，'x1' 和 'x2'，它们指定线的起点和终点的 x 坐标。 “y1”和“y2”属性不是必需的，但如果未指定，则默认为“0”。

在 CodePen 中，无论您在 HTML 编辑器中编写什么，出现在基本 HTML5 模板中的元素都是 HTML5 元素。 如果你想添加影响整个文档的类，这是去的地方。 可以从 Internet 上找到的任何样式表将 CSS 应用到您的 Pen。 您可以从 Internet 上的任何地方轻松更改您的 Pen 上的脚本。 您可以为其指定一个 URL，当您将 JavaScript 放入 Pen 时，我们将按照您指定的顺序添加它。 如果脚本包含已链接的预处理器的文件扩展名，我们将处理该脚本。

我可以将类添加到 Svg 路径吗？

将类属性添加到 html 元素与将类添加到 HTML 元素相同。 使用 css 时，必须将svg 代码直接插入到文档中，但 *img 标签不会引用它。

Svg 元素和类

下图包括名为“容器”的SVG 元素中的“矩形”和“圆形”元素。 在“rect”元素上，有两个“width”和“height”属性； 在“circle”元素上，有两个“radius”属性。 XMLns:xlink xmlns: xlink: http://www.w3.org/1999/xlink/xlink.html width=100% height=100% Circle width: 50% height: 50% radius: 10% fill: red