• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 网页设计 » CSS » 正文

如何手动编码 SVG

小码哥 • 2年前 (2022-08-31) • CSS

可缩放矢量图形的一大优点（除了它们可以无限缩放而不会损失质量）是，一旦您了解了基本原理，您就可以很容易地手动编写简单的形状，而无需打开图形应用程序。 

只需几行代码，您就可以拥有自己的自定义图标，并且您将确切地知道每个图标是如何组合在一起的。当您创建自己的 svg 时，您可以确保以最有效的方式编写它们，并且在您的站点中使用它们时拥有最大程度的控制。

在本教程中，我们将涵盖手动编码 SVG 的所有基础知识，但我不会用枯燥的讲座来让你厌烦，只是简单地介绍相关的形状和属性。相反，您将通过练习学习如何编写 SVG 代码，创建您在本教程开始时看到的六个图标（查看在线演示）。在此过程中，您将使用 SVG 手动编码所需的所有基本元素。

说到这些基本元素，让我们快速介绍一下它们各自的含义。

基本 SVG 元素

您可以使用 SVG 处理很多复杂性，但这对于我们将要制作的图标来说不是必需的。以下列表涵盖了我们需要的构建块。

  • <svg> 包装并定义整个图形。 <svg>对可缩放矢量图形而言，<html>元素对网页而言。

  • <line> 制作单条直线。

  • <polyline> 制作多段线。

  • <rect> 制作长方形和正方形。

  • <ellipse> 制作圆形和椭圆形。

  • <polygon> 制作直边形状，具有三个或更多边。

  • <path> 通过定义点和它们之间的线来制作您喜欢的任何形状。

  • <defs> 定义可重用资产。最初放置在此<defs>部分内的任何内容均不可见。 <defs> 对可缩放矢量图形而言， <head> 元素对网页而言。

  • <g> 将多个形状包装成一个组。将组放在该<defs>部分中以使它们能够被重复使用。

  • <symbol> 像一个组，但有一些额外的功能。通常放置在该<defs>部分。

  • <use> 获取该部分中定义的资产<defs>并使其在 SVG 中可见。

当我们完成并创建我们的图标时，我们将按照上面看到的顺序处理这个元素列表。

入门文件

在我们开始之前，请从 GitHub 存储库中获取一份启动文件的副本。您可以下载 .zip 文件，也可以将 repo 克隆到您自己的系统。

我们将从一个已经具备一些基本 HTML 和 css 的文档开始。这将为我们将要制作的 SVG 提供一些样式，并且还会在页面上为您设置一个小网格。我们将在这个网格的顶部创建我们的图标，希望它可以帮助您在放置 SVG 时可视化您正在使用的坐标。 

当您从源“Starter Files”文件夹中打开“handcodedsvg.html”时，您应该会看到以下内容：

如何手动编码 SVG 第1张

快速入门x和y价值观

在网站的 2D 空间中工作时，横轴由 表示，x纵轴由 表示y。沿这些轴中的每一个的位置由数字表示。如果我们想将某些东西向右移动，我们需要使用递增x的值，而要向左移动，我们将使用递减的x值。同样，要向下移动某物，我们将使用递增y的值，而要向上移动某物，我们将使用递减的y值。

表示单个点的x和值的常用简写是。例如，轴上的点和轴上的点可能会写成，因为我会在本教程中不时使用这种速记。y(x, y)10x50y(10, 50).

注意到我们网格上最黑的两条线了吗？我们将放置 SVG，使其左上角与它们相交的位置对齐。因此，该交点将代表我们的 SVG 中的位置x = 0和y = 0，或。(0,0)

背景网格

每条最轻的网格线代表10px，中等粗细的线代表100px。因此，如果我们想将一个对象从一条中等粗度的线向下移动到下一条，我们会将其在y轴上的位置增加 1 100px。

如果这听起来还是有点不清楚，请不要担心，当我们进入创建 SVG 图标的实用性时，这一切都会变得有意义。

默认 SVG 样式

请注意，在起始 HTML 文件中包含一些带有默认样式的 CSS，用于我们即将创建的 SVG 图标：

svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

这会将我们的图标设置为没有填充，以及 5px带有圆形大写和连接的黑色宽笔画。

1.设置SVG

创建任何 SVG 的第一步是放置一个<svg></svg>元素。您希望 SVG 显示的任何内容都必须位于这些标签之间。您可以在此元素上使用一些属性，但我们会保持简单，只使用widthand height。

<body>在HTML 文档的部分中添加以下代码：

<svg width="750" height="500">
 </svg>

注意：我们的起始文件中的 CSS 将向下和向右偏移这个 SVG，100px因此它的左上角将位于我们背景网格上两条最暗线的交点处。本教程中 CodePen 演示中的值也可能略有不同，但请随意使用它们。

2. 创建“左对齐”图标

让我们首先使用<line>元素来创建这个左对齐图标：如何手动编码 SVG 第2张

line 元素有四个你需要使用的属性：

  • x1 线的水平起点

  • y1 直线的垂直起点

  • x2 线的水平终点

  • y2 线的垂直终点

综上所述，您使用x1andy1属性设置行的开始位置，使用x2andy2属性设置行的结束位置。

让我们创建图标的第一行，即顶部的那个。我们要让线条变45px长，但是5px我们使用的笔触会在线条的外部添加一些额外的像素。因此，我们需要将我们的线向下和向右偏移，3px以确保不会剪掉由笔划创建的额外像素。

出于这个原因，我们将3在x轴上和3轴上的位置开始我们的线y。(3,3)我们可以使用属性来设置这条线的起点x1="3" y1="3"。

我们希望这条线很45px长，所以我们将添加45到我们的起始x位置3，给我们48作为我们想要设置的值x2。我们希望这条线在水平轴上的相同位置结束，所以我们将设置y2为 equal 3，即我们给 的相同值y1。我们将(48,3)通过 attributes 添加这条线的终点x2="48" y2="3"。

第一行的完整代码应如下所示：

<line x1="3" y1="3" x2="48" y2="3"></line>

检查您的浏览器预览，您应该会看到一条45px带有漂亮圆形大写字母的长黑线。

现在我们可以继续将接下来的三行添加到我们的图标中。我们希望总共有四行。第一个和第三个应该45px长，第二个和第四个应该62px长。我们还希望每个16px.

我们可以通过以下代码实现这一点：

<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>

注意：y每条线的值逐渐增加，16px以创建所需的垂直间隙。

再看看你的浏览器预览，你应该看到所有四行。您也可以直接在此笔中编辑 SVG：

See the Pen  How to Hand Code SVG #1 by Envato Tuts+ (@tutsplus)  on CodePen.

注释掉你的图标

有了该代码，您的第一个图标就已经制作好了。我们已经准备好开始创建下一个图标了，我们希望让它在网格上的相同位置，但现在左对齐图标挡住了。因此，现在只需注释掉它的代码以清除空间。稍后当我们将图标转换为可重用资产时，我们将返回并取消注释。

您需要对每个图标执行相同的操作，在完成创建后将其注释掉。出于这个原因，在每个图标的代码上方添加一个小注释可能也是一个好主意，这样当您稍后返回它们时您就知道哪个是哪个。

3. 创建一个“右插入符号”图标

对于这个图标，让我们使用<line>元素的下一个演变：<polyline>. 我们将使用它来创建一个正确的指向插入符号。

如何手动编码 SVG 第3张

该<polyline>元素只有一个属性：points. 在这里，您使用成对的数字来设置一系列点。它们之间将自动绘制线条。数字对只是在points属性内一个接一个地写入。逗号分隔不是必需的，但可以选择包含它。为了便于阅读，您可能还希望将每对值放在代码中的自己的行中。

我们将在我们开始上一个图标的同一位置开始我们的右插入符号的折线，(3,3)以确保我们的笔划和大写字母不会被剪裁。我们希望我们的第二个点向右移动，然后向下移动25px，因此我们将其设置为(30,28)。我们的第三个点应该与第一个点垂直对齐，并向下移动另一个25px，所以它将被设置为(3,53)。

我们可以将这些点添加到折线的 points 属性中，如下所示：

<polyline points="
  3 3
  30 28
  3 53
"></polyline>

如果你想要更简洁的代码，你也可以将上面的代码写成：

<polyline points="3 3, 30 28, 3 53"></polyline>

或者

<polyline points="3 3 30 28 3 53"></polyline>

看看你的浏览器预览，你应该会看到你右边的插入符号图标显示：另一个图标完成了，就像那样！ 

See the Pen  How to Hand Code SVG #1 by Envato Tuts+ (@tutsplus)  on CodePen.

再一次，注释掉这个图标并给它一个小注释，以便在移动到下一个图标之前知道它是哪一个。

4. 创建一个“浏览器”图标

现在我们有了线条，让我们创建一些形状，从一个矩形 ( <rect>) 开始。我们将使用它和几个<line>s 来创建一个浏览器图标。


如何手动编码 SVG 第4张


可以使用该<rect>元素创建矩形和正方形，该元素具有您需要提供的四个属性：

  • xx轴上 的左上角位置

  • yy轴上 的左上角位置

  • width 形状的宽度

  • height 形状的高度

注意：如果您愿意，您也可以使用属性rx和ry创建圆角。

我们将创建一个矩形，其左上角3px在两个方向上偏移，再次避免剪切笔触，因此我们将使用属性 x="3" y="3"。我们希望它80px变宽变60px高，所以我们还将使用属性width="80" height="60"。

因此，我们的完整矩形代码应该是：

<rect x="3" y="3" width="80" height="60"></rect>

保存您的代码并查看您的浏览器预览。你应该看到一个整洁的小矩形坐在那里。

现在我们需要做的就是在顶部添加一条水平线，并在左上角附近添加一条垂直线，如本节开头的图像所示。我们将使用与之前相同的行创建过程，我们完整的浏览器图标代码应如下所示：

<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>

花点时间查看两条线属性中提供的坐标，并可能稍微更改它们的值，以便您可以看到它们在此图标中的工作方式。

See the Pen  How to Hand Code SVG #2 by Envato Tuts+ (@tutsplus)  on CodePen.

5. 创建一个“警报”图标

现在我们已经控制了矩形的创建，让我们尝试使用<ellipse>s。我们将使用其中两个以及一个<line>来创建此警报图标：

如何手动编码 SVG 第5张

与矩形一样，该<ellipse>元素也需要四个属性，但它们与矩形的属性略有不同。我们设置了水平和垂直半径，而不是使用宽度和高度。而不是定位形状的左上角，我们定位它的中心：

  • cxx轴上 的中心位置。想想“中心 x 的 cx”。

  • cyy轴上 的中心位置。想想“中心y的cy”。

  • rx 轴上半径的大小x，即形状的高度除以一半。想想“半径 x 的 rx”。

  • ry 轴上半径的大小y，即形状的宽度除以一半。想想“半径 y 的 ry”。

80px我们想要一个宽高的完美圆形80px，这意味着我们需要它的半径40px在两个轴上。我们将使用 attributes 进行设置rx="40" ry="40"。

我们还希望圆圈与图表上最暗的线齐平。鉴于我们的圈子80px又宽又高，它的中心点将位于40px。然而，我们还需要允许我们的3px偏移量以避免剪裁，这意味着我们的圆的中心点应该43px在两个轴上都是 a。我们将使用 attributes 进行设置cx="43" cy="43"。

将所有这些放在一起，我们得到以下代码：

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

检查您的浏览器预览，您现在应该在页面上看到一个圆圈。

我们现在要添加第二个圆圈，在感叹号底部创建点。我们将以同样的方式创建它，唯一的区别是我们将使用内联样式将填充设置为黑色：

<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>

最后，我们只需要添加一行来创建感叹号的另一部分。再一次，我们使用了与迄今为止我们使用的其他线条相同的技术，唯一的区别是我们将使用内联样式将笔画宽度从 加厚5px到8px.

我们的警报图标的完整代码如下：

See the Pen  How to Hand Code SVG #4 by Envato Tuts+ (@tutsplus)  on CodePen.

6. 创建一个“播放”图标

现在我们已经掌握了相对固定的矩形和椭圆形状，我们准备好使用<polygon>元素来滚动我们自己的形状。我们可以用它创建任何我们想要的多边形状，从八边形到星星。但是，我们现在将保持直截了当并创建一个三角形。我们将它与 结合起来<ellipse> 创建一个播放图标：

如何手动编码 SVG 第6张

<polygon>元素几乎与元素相同<polyline>。它也只有一个属性 ，points您可以在其中使用成对的值来设置构成形状的每个点。不同之处在于，当折线保持打开状态时，多边形会自动闭合。

让我们首先将我们的多边形所在的圆圈向下放置。我们将使用与警报图标中完全相同的椭圆：

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

现在让我们创建我们的多边形。我们将放置三个点，这些点之间会自动生成线条以创建一个三角形。点将是 (35,23)、(60,43) 和 (35,63)。因此，我们多边形的代码将是：

<polygon points="35 23, 60 43, 35 63" />

我们完整的播放图标代码是：

See the Pen  How to Hand Code SVG #5 by Envato Tuts+ (@tutsplus)  on CodePen.

7. 创建一个“下载”图标

现在我们将转向最可能复杂但同时也是最灵活的生成 SVG 形状的方法，这就是<path>元素。创建路径有点像创建多边形，在其中一次布置一个形状。但是，使用路径，您无需自动化即可直接创建每个点和线，并且您还可以选择在点之间创建曲线而不是直线。

路径可用于创建几乎任何东西，但超出一定程度的复杂性，您最好使用矢量设计应用程序而不是手动编码。出于这个原因，我们将专注于路径功能的一小部分，并使用它来创建这个下载图标：

如何手动编码 SVG 第7张

从技术上讲，您可以使用多边形创建上述形状，但这个箭头将为我们提供了解路径元素如何工作的好方法。

我们将只使用 的一个属性<path>，那就是d。代表“d数据”，在这里您将定义路径的所有点和线。在此属性中，设置路径点并在它们之间创建线的命令通过单个字母（例如Mor L，后跟一组x和/或y坐标）提供。

其中有几个命令，但为了向您介绍如何使用，<path>我们将坚持使用一些可以在手动编码时实际使用的命令。它们如下：

  • M 代表moveto. 它在给定位置开始一条新路径，由x和y值定义。想象一下，这就像将鼠标悬停在画布上的某个点上，准备绘图。大写字母M表示移动到一组绝对坐标。（小写m表示相对坐标）。

  • L 代表lineto. 从当前位置画一条线到新位置。大写字母L表示移动到一组绝对坐标。（小写l表示相对坐标）。

  • Z 代表closepath. 它通过在当前点和路径中创建的第一个点之间绘制一条直线，将路径转换为闭合形状。

您绝对应该查看这三个命令（以及我们将使用它们创建的图标）作为<path>元素的介绍性入门。要真正充分利用它，您需要熟悉所有可用的命令。

为您的下载图标编码

要编码您的下载图标路径，我建议首先添加空路径元素：

<path d="
 "></path>

从这里，一次添加一个命令，保存并查看形状的进度，以便了解它是如何创建的。我还建议将每个命令放在自己的行中以提高可读性。

  1. 首先，我们要移动到(18,3)，我们希望箭头开始的点。为此，我们将命令添加M 18 3到路径的d属性中。

  2. 接下来，我们要使用该L命令创建一条从路径起点沿x轴绘制的线28px。为此，让我们添加第二个命令：L 46 3. 检查您的预览，您应该会看到一条小的水平线。

  3. 37px现在让我们通过添加来画一条直线L 46 40。

  4. 15px然后通过with直接向右L 61 40

  5. 接下来我们必须开始创建箭头点。我们需要在斜下方和左侧画一条线。我们将使用L 32 68.

  6. 然后我们将有一条线沿对角线向上和向左移动L 3 40。

  7. 现在我们将通过再次向右绘制一些路径来完成我们的箭头L 18 40。

  8. 要闭合我们的形状，我们不需要指定要画线的点。我们需要做的就是添加Z命令，它会自动为我们关闭我们的形状。

您的最终箭头路径代码应如下所示：

<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>

有关使用的更多信息，<path>请查看页面底部的参考资料。

See the Pen  How to Hand Code SVG #6 by Envato Tuts+ (@tutsplus)  on CodePen.

8. 添加 <defs> 元素

我们已经完成了六个图标的编码，所以现在我们可以让它们准备好在我们的 SVG 中放置和重用。

为此，我们将为所有六个（目前已被注释掉）图标包装代码，并带有标签<defs></defs>：

<defs>
<!-- All the icons you created so far go in here -->
</defs>

这告诉系统我们创建的所有图标默认是隐藏的，直到我们明确使用它们。

您现在可以取消注释每个图标，它们将不会在页面上显示。

9. 创建群组 <g>

有两种方法可以使我们的图标准备好使用：将它们转换为组或符号。我们将把图标的前半部分分组，将后半部分变成符号，这样我们就可以说明不同之处。

要将我们的一个图标转换为一个组，我们所要做的就是用<g></g>标签包装它。为了使该组可用，我们还需要给它一个唯一的 ID。

例如：

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

用标签包裹前三个图标<g></g>并添加唯一的 ID，如下所示：

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>
 <g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>
 <g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

10. 放置组 <use>

我们现在在我们的<defs>元素中定义了三个图标组，所以我们准备在我们的 SVG 中使用它们。为此，我们需要做的就是添加一个<use>元素（确保在元素之后和之外添加它<defs>），并设置一个href属性来定位所需图标的 ID。

例如，要使用左对齐图标，请添加以下代码：

<use href="#leftalign"></use>

要将图标放置在特定位置添加x和y属性：

<use href="#leftalign" x="100" y="100"></use>

添加所有三个图标并将它们分开的代码如下所示：

<use href="#leftalign" x="100" y="100"></use>
<use href="#rightcaret" x="300" y="100"></use>
<use href="#browser" x="500" y="100"></use>

检查您的浏览器，您应该会看到所有三个第一个图标：

如何手动编码 SVG 第8张

11. 创建符号 <symbol>

除了使用组来定义您的图标，您还可以使用符号。符号与组几乎相同，但是您可以访问其他设置来控制视图框和纵横比。

如果您想做一些事情，比如将我们迄今为止创建的图标居中，这将非常有用。我们将剩下的三个图标变成符号，然后调整它们，使它们垂直填充一个100px高空间，并在该空间中水平居中。

我们以与我们的组相同的方式创建我们的符号，只是我们会将最后三个图标的代码中的每一个都包装在<symbol></symbol>标签中。我们还需要为每个添加一个唯一的 ID。

然而，我们还要添加一个viewBox 属性。这将让我们定义每个符号的可见部分应该是什么。当浏览器可以访问此信息时，它可以正确缩放和对齐符号。

我们需要给我们的viewBox属性四个值。前两个将定义我们图标的左上角，第三个和第四个分别定义它的宽度和高度。

从我们的“警报”图标开始，它的宽度和高度都是，86px所以我们将其设置viewBox为0 0 86 86：

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

“播放”图标也是86px宽高的，“下载”图标是64px宽71px高的。因此，我们符号的相应代码应为：

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>
 <symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>
 <symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

12. 放置符号 <use>

我们现在可以像使用我们的组一样使用我们的符号图标。但是，我们还将为每个设置提供宽度和高度属性100：

<use href="#alert" x="100" y="200" width="100" height="100"></use>
<use href="#play" x="300" y="200" width="100" height="100"></use>
<use href="#download" x="500" y="200" width="100" height="100"></use>

您会看到每个基于符号的图标都整齐地填充并对齐其100px空间100px：


如何手动编码 SVG 第9张


尝试将width和height属性应用于<use>基于组的图标之一的元素。您会注意到没有任何变化。这是因为浏览器依赖于viewBox值（组不能拥有）来知道如何缩放图标。

包起来

这是您完成的代码的外观：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
  html, body {
    height: 100%;
    width: 100%;
    background: #e9e9e9;
  }
  body {
    margin: 0;
    text-align: center;
  }
  .grid {
    width: 750px;
    height: 500px;
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 100px;
    background-image: url('grid.png');
    position: relative;
  }
  .grid::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    width: 750px;
    height: 600px;
  }
  .grid::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 850px;
    height: 500px;
  }
  svg {
    stroke: rgb(0, 0, 0);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  </style>
</head>
<body>
 <div>
 <svg width="750" height="500">
 <defs>
 <g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>
 <g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>
 <g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>
 <symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>
 <symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>
 <symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>
 </defs>
 <use href="#leftalign" x="100" y="100"></use>
 <use href="#rightcaret" x="300" y="100"></use>
 <use href="#browser" x="500" y="100"></use>
 <use href="#alert" x="100" y="200" width="100" height="100"></use>
 <use href="#play" x="300" y="200" width="100" height="100"></use>
 <use href="#download" x="500" y="200" width="100" height="100"></use>
 </svg>
 </div>
 </body>
</html>

这涵盖了手动编码 SVG 的要点！让我们回顾一下我们学到的东西：

  • 设置你的<svg>元素来包裹你的整个图形。

  • 使用<line>和<polyline>创建线条。

  • 使用<rect>,<ellipse>和<polygon>创建闭合形状。

  • 用于<path>创建您想要的任何内容。

  • <g>使用元素对形状进行分组。

  • 对于具有额外功能的群体行为，请使用<symbol>

  • 使用该<defs>元素定义任何可重用的符号和组。

  • 将您定义的可重用符号和组与<use>元素一起放置。

我们在本教程中学习了一些坚实的基础，但是您可以使用 SVG 做更多事情，所以不要停在这里，继续挖掘并发现更多可以实现的令人敬畏的事情！

同时，希望您不再完全依赖矢量设计应用程序来创建 SVG，并且您有信心手工制作一些自己的图形。对于更复杂的图形，设计应用程序仍然是要走的路，但是您可以使用您可以使用的构建块做很多事情，利用手动编码带来的速度和控制。


文章目录
  • 基本 SVG 元素
  • 入门文件
    • 快速入门x和y价值观
    • 背景网格
    • 默认 SVG 样式
  • 1.设置SVG
  • 2. 创建“左对齐”图标
    • 注释掉你的图标
  • 3. 创建一个“右插入符号”图标
  • 4. 创建一个“浏览器”图标
  • 5. 创建一个“警报”图标
  • 6. 创建一个“播放”图标
  • 7. 创建一个“下载”图标
    • 为您的下载图标编码
  • 8. 添加 <defs> 元素
  • 9. 创建群组 <g>
  • 10. 放置组 <use>
  • 11. 创建符号 <symbol>
  • 12. 放置符号 <use>
  • 包起来

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何手动编码 SVG
    文章地址：https://www.weixiaolive.com/en/index.php/post/971ecea8.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云