前端的你应该知道的SVG知识

黑色的枫2024-01-11 10:52

在我们阅读这篇文章之前，我们需要思考下，我们为什要去了解SVG，阅读了这篇文章是否可以给我们带来帮助。

  1. 如果你想要一张 css或者JavaScript可以控制的图片，那么你可以考虑SVG。

  2. 如果你期望图片的质量不会因为放大或缩小而降低，那么你可以考虑SVG。

  3. 如果你期望网页对残障人士和视力受损的用户有更好的体验，那么你可以考虑SVG。

  4. 如果你期望图片在高清设备还是低分辨率设备上，都能保持清晰和细腻的图像质量，那么你可以考虑SVG。

1. 矢量图

我们在学习SVG之前，需要先了解一下位图和矢量图。

简单来说：

  • 位图：由像素点组成的图像，放大图像会失真，canvas就是位图效果。
  • 矢量图：由数学公式(通常是XML)来描述图像，放大图像不会失真。

详细来说：

  • 位图：也称为像素图，是由一个个像素点组成的图像。每个像素点都有特定的颜色和位置，这些信息被编码并存储在文件中。位图的显示效果取决于像素的数量和密度，即分辨率。一般来说，位图主要用于表示细节丰富，颜色和亮度变化多的图像，如照片，自然风景等。
  • 矢量图：使用数学公式(通常是XML)来描述图像，而不是像位图那样使用像素矩阵。这些数据公式决定了图像的形状，线条和填充样式。由于矢量图的每个元素都是由数学公式定义的，因此它们可以在不同尺寸和分辨率下保持清晰度。这种类型的图像在缩放，旋转或以其他方式变换时不会失去细节或者质量。

2. SVG

SVG究竟什么？

是Scalable Vector Graphics的缩写，意思是可缩放矢量图形。

这是一种基于XML的二维矢量图形标准，由W3C开发的。

对于初学者来说，可以将SVG理解为一套新的HTML标签。

所以我们可以使用css和JavaScript来对标签进行操作。

很多小伙伴可能已经忘记了XML，我们回顾一下：

XML(可扩展标记语言)是一种用于描述数据的标记语言，它使用一系列简单的标记来描述数据，这些标记可以用来表示不同类型的数据元素，如标题，作者，价格等。

3. 优势

SVG的优势：

  1. 可扩展性和响应能力：SVG是使用形状，数字和坐标在浏览器中渲染图形，这使得它具有分辨率无关性和无限可伸缩性。不管我们画了什么图形，不论用户将页面放的多大，图形都不会失真，只是比例变化了而已。

  2. 可编程性和交互性：SVG是完全可编辑和脚本可编写的，我们可以通过css和JavaScript将各种动画和交互添加到绘图中。

  3. 无障碍：SVG文件是基于文本的，可以进行搜索和索引，这使得他们可以通过屏幕阅读器，搜索引擎和其他设备阅读。

  4. 性能：与GIF，JPG和PNG相比，SVG通常是较小的文件。

4. 劣势

SVG的劣势：

设计复杂性：SVG需要具备一定的设计和制作技巧，与位图相比，SVG的设计难度较大，需要更高的技术水平。

浏览器兼容性：在一些旧版浏览器中，可能存在对SVG的兼容性问题。

渲染速度：SVG复杂度过高会降低页面渲染速度。

5. 使用方式

对于前端开发的我们，要如何去使用SVG呢？

SVG归根结底来说和JPG，PNG一样，也是一种图像格式，所以我们可以在HTML中，将SVG的路径设置为<img>的src属性。

我们也可以将SVG的代码放在HTML中，我们完全可以把SVG的代码看做成我们的HTML标签。

例如：

arduino 复制代码 
<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
</svg>

我们也可以通过css的background-image或者伪元素，将SVG图片作为背景图像。

6. 使用场景

  1. 图标和徽标：由于SVG可以无损缩放，所以非常适合用来做网站的图标和徽标，无论是在大屏幕还是小屏幕上，SVG都能保证清晰度。

  2. 插画：任何钢笔或铅笔制作的传统绘图，都可以完美转化为SVG格式。

  3. 动态图形：SVG的脚本特性使它可以用来创建动态的，交互式图形。

    之前我做过空调的SVG图片，然后由JavaScript控制空调上的开关，温度，模式。

  4. 地图和图表：SVG可以绘制地图和图表，然后和JavaScript进行数据交互。

  5. 游戏：虽然SVG不是专门用来做游戏的，但是一些游戏开发者会用SVG来制作游戏中的图形。

总的来说，任何需要保持清晰度，动态交互和无损缩放的图形场景，都可以考虑使用SVG。

7. Canvas与SVG

Canvas和SVG都是用于在网页上绘制图形的工具，但它们在许多方面都存在显著的差异。以下是对Canvas和SVG的对比：

  1. 基本概念：

    • Canvas ：是HTML5提供的 <canvas>标签，使用JavaScript在网页上绘制图形。它主要通过像素进行渲染，不支持事件处理器。
    • SVG ：全称为可伸缩矢量图形（Scalable Vector Graphics），是基于XML的二维图形语言。它由许多节点构成，每个被绘制的图形都被视为一个对象，如果SVG对象的属性发生变化，浏览器能够自动重现图形。

  2. 特点：

    • Canvas ：
      • 依赖分辨率。
      • 不支持事件处理器。
      • 弱的文本渲染能力。
      • 能够以 .png 或 .jpg 格式保存结果图像。
      • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
    • SVG ：
      • 基于矢量，能够很好地处理图形大小的改变。
      • 不支持事件处理器。
      • 弱的文本渲染能力。
      • 能够以 .png 或 .jpg 格式保存结果图像。

  3. 性能：

    • Canvas的历史没有SVG悠久，它是H5新增的标签，而SVG已经存在十几年。
    • SVG图形节点足够多时，渲染会比较慢，而Canvas性能好一些。

  4. 其他差异：

    • Canvas适合带有大型渲染区域的应用程序（如谷歌地图）。
    • SVG的复杂度高可能会减慢渲染速度（任何过度使用DOM的应用都不快）。

总结 ：Canvas和SVG各有其优势和适用场景。Canvas更适合图像密集型的游戏和需要高效渲染的应用，而SVG更适合处理矢量图形和大型渲染区域。

8. 实战一

说了这么多，我们来开始实战，我们要在HTML中，画出一个SVG图像。

arduino 复制代码 
<html>
<body>
<h1>Feng SVG</h1>

<svg version="1.1"  baseProfile="full"  width="300" height="200"  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>
</svg> 

</body>
</html>

运行后：

代码解读：

  1. <svg>和</svg>是表示SVG代码，相当于开始标签和结束标签，这是根元素。

  2. width 和 height 属性可设置此 SVG 的宽度和高度。

  3. version 属性可定义所使用的 SVG 版本。

  4. xmlns 属性可定义 SVG 命名空间。

  5. baseProfile 特性描述了作者认为正确渲染内容所需要的最小的 SVG 语言概述。这个特性不会说明任何处理限制，可以把它看作是元数据。

  6. SVG 的 <rect> 用来创建一个矩形，通过 fill 把背景颜色设为黄色。

  7. SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)，r 属性定义圆的半径。 一个半径 80px 的绿色圆圈 <circle> 绘制在红色矩形的正中央 （向右偏移 150px，向下偏移115px）。

  8. stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽，红色边框。

  9. fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

9. 实战二

我们还可以在线设计SVG图片，我们可以直接使用该图片或者拷贝其代码复制到我们的代码中。

SVG在线编辑： c.runoob.com/more/svgedi...

10. SVG的基本形状

10.1 矩形

示例一：

正常的矩形

css 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>

效果：

代码解析:

  • <rect>：这是一个矩形元素，用于在SVG图像中绘制矩形。
  • width="300" 和 height="100"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是300像素，高度是100像素。
  • style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)"：这设置了矩形的样式。
    • fill:rgb(122,122,0)：设置填充颜色为RGB值(122,122,0)的颜色，这是一种黄色调的颜色。
    • stroke-width:2：设置线条宽度为2像素。
    • stroke:rgb(0,0,0)：设置线条颜色为RGB值(0,0,0)的颜色，这是一种黑色。

综上，这段代码会在SVG图像中绘制一个宽度为300像素、高度为100像素、填充颜色为黄色调、线条宽度为2像素、线条颜色为黑色的矩形。

示例二：

填充和边框的透明度

css 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5" />
</svg>

效果：

代码解析:

  • <rect>：这是一个矩形元素，用于在SVG图像中绘制矩形。
  • x="50" 和 y="20"：这两个属性定义了矩形左上角的坐标（x, y）。在这个例子中，坐标是(50, 20)。
  • width="150" 和 height="150"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是150像素，高度是150像素。
  • style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5"：这设置了矩形的样式。
    • fill:blue：设置填充颜色为蓝色。
    • stroke:red：设置线条颜色为红色。
    • stroke-width:5：设置线条宽度为5像素。
    • fill-opacity:0.5：设置填充透明度为0.5，这意味着矩形将是半透明的。
    • stroke-opacity:0.5：设置线条透明度为0.5，这意味着线条将是半透明的。

综上，这段代码会在一个SVG图像中绘制一个左上角坐标为(50, 20)、宽度为150像素、高度为150像素、填充颜色为蓝色、线条颜色为红色、线条宽度为5像素、填充透明度和线条透明度都为0.5的矩形。

示例三：

整个元素的透明度

arduino 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4" />
</svg>

效果：

代码解析:

  • <rect>：这是一个矩形元素，用于在SVG图像中绘制矩形。
  • x="50" 和 y="20"：这两个属性定义了矩形左上角的坐标（x, y）。在这个例子中，坐标是(50, 20)。
  • width="150" 和 height="150"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是150像素，高度是150像素。
  • style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4"：这设置了矩形的样式。
    • fill:blue：设置填充颜色为蓝色。
    • stroke:pink：设置线条颜色为粉红色。
    • stroke-width:5：设置线条宽度为5像素。
    • opacity:0.4：设置透明度为0.4，这意味着矩形将是半透明的。

综上，这段代码会在一个500x500像素的SVG图像中绘制一个左上角坐标为(50, 20)、宽度为150像素、高度为150像素、填充颜色为蓝色、线条颜色为粉红色、线条宽度为5像素、透明度为0.4的矩形。

示例四：

圆角矩形

arduino 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="160" style="fill:red;stroke:black;stroke-width:1;opacity:0.5" />
</svg>

效果：

代码解析:

  • <rect>：这是一个矩形元素，用于在SVG图像中绘制矩形。
  • x="50" 和 y="20"：这两个属性定义了矩形左上角的坐标（x, y）。在这个例子中，坐标是(50, 20)。
  • rx="20" 和 ry="20"：这两个属性定义了矩形的圆角半径。在这个例子中，矩形的圆角半径是20像素。
  • width="150" 和 height="160"：这两个属性定义了矩形的宽度和高度。在这个例子中，矩形的宽度是150像素，高度是160像素。
  • style="fill:red;stroke:black;stroke-width:1;opacity:0.5"：这设置了矩形的样式。
    • fill:red：设置填充颜色为红色。
    • stroke:black：设置线条颜色为黑色。
    • stroke-width:1：设置线条宽度为1像素。
    • opacity:0.5：设置透明度为0.5，这意味着矩形将是半透明的。

综上，这段代码会在一个500x500像素的SVG图像中绘制一个左上角坐标为(50, 20)、宽度为150像素、高度为160像素、填充颜色为红色、线条颜色为黑色、线条宽度为1像素、透明度为0.5的圆角矩形。

10.2 圆形

示例：

arduino 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
</svg>

效果：

代码解析:

  • <circle>：这是一个圆形元素，用于在SVG图像中绘制圆形。
  • cx="100" 和 cy="50"：这两个属性定义了圆心的坐标（x, y）。在这个例子中，圆心的坐标是(100, 50)。
  • r="40"：这个属性定义了圆的半径，单位是像素。在这个例子中，圆的半径是40像素。
  • stroke="red"：这个属性定义了圆的边框颜色。在这个例子中，圆的边框颜色是红色。
  • stroke-width="2"：这个属性定义了圆的边框宽度。在这个例子中，圆的边框宽度是2像素。
  • fill="blue"：这个属性定义了圆的填充颜色。在这个例子中，圆的填充颜色是蓝色。

综上，这段代码会在一个SVG图像中绘制一个圆心坐标为(100, 50)、半径为40像素、边框颜色为红色、边框宽度为2像素、填充颜色为蓝色的圆形。

10.3 椭圆

示例：

ini 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2" />
</svg>

效果：

代码解析:

  • <ellipse>：这是一个椭圆元素，用于在SVG图像中绘制椭圆。
  • cx="300" 和 cy="80"：这两个属性定义了椭圆的中心点坐标（x, y）。在这个例子中，中心点坐标是(300, 80)。
  • rx="100" 和 ry="50"：这两个属性定义了椭圆的长轴和短轴半径。在这个例子中，长轴半径是100像素，短轴半径是50像素。
  • style="fill:red;stroke:purple;stroke-width:2"：这设置了椭圆的样式。
    • fill:red：设置填充颜色为红色。
    • stroke:purple：设置线条颜色为紫色。
    • stroke-width:2：设置线条宽度为2像素。

综上，这段代码会在一个500x500像素的SVG图像中绘制一个中心点坐标为(300, 80)、长轴半径为100像素、短轴半径为50像素的红色椭圆，线条颜色为紫色，线条宽度为2像素。

10.4 线

示例：

ini 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:5" />
</svg>

效果：

代码解析:

  • <line>：这是一个线段元素，用于在SVG图像中绘制线段。
  • x1="0" 和 y1="0"：这两个属性定义了线段的起始点坐标（x, y）。在这个例子中，起始点坐标是(0, 0)。
  • x2="200" 和 y2="200"：这两个属性定义了线段的终点坐标（x, y）。在这个例子中，终点坐标是(200, 200)。
  • style="stroke:black;stroke-width:5"：这设置了线段的样式。
    • stroke:black：设置线条颜色为黑色。
    • stroke-width:5：设置线条宽度为5像素。

综上，这段代码会在一个SVG图像中绘制一条从(0, 0)到(200, 200)的黑色线段，线条宽度为5像素。

11.5 折线

示例一：

ini 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,10 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

效果：

代码解析:

  • <polyline>：这是一个多边形线条元素，它使用points属性定义多边形的顶点。
  • points="20,20 40,25 60,40 80,10 120,140 200,180"：这定义了多边形的顶点。每个顶点由两个坐标值（x和y）组成，它们之间用空格分隔，并且每个顶点之间用空格分隔。例如，20,20定义了一个顶点在(20,20)的位置。
  • style="fill:none;stroke:black;stroke-width:3"：这设置了多边形的样式。
    • fill:none：设置填充颜色为透明（不填充）。
    • stroke:black：设置线条颜色为黑色。
    • stroke-width:3：设置线条宽度为3像素。

综上，这段代码会在一个SVG图像中绘制一个黑色的折线。这个折线有6个点，形状大致为一个不规则的六边折线。注意：因为设置了fill:none，所以该多边形线段不会进行填充，只显示其黑色边框。

示例二：

画一个五角星

css 复制代码 
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>

效果：

代码解析:

  • <polyline>：这是一个多边形线条元素，它使用points属性定义多边形的顶点。
  • points="100 10,40 180,190 60,10 60,160 180"：这定义了多边形的顶点。每个顶点由两个坐标值（x和y）组成，它们之间用空格分隔，并且每个顶点之间用逗号分隔。例如，100 10定义了一个顶点在(100,10)的位置。
  • style="fill:blue;stroke:blue;stroke-width:1"：这设置了多边形的样式。
    • fill:blue：设置填充颜色为蓝色。
    • stroke:blue：设置线条颜色为蓝色。
    • stroke-width:1：设置线条宽度为1像素。

综上，这段代码会在一个300x300像素的区域内绘制一个蓝色的多边形。这个多边形有5个顶点，形状大致为一个不规则的五边形。

10.6 多边形

示例一：

ini 复制代码 
<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:red;stroke:purple;stroke-width:1"/>
</svg>

效果：

代码解析:

  • <polygon>：这是一个多边形元素，用于在SVG图像中绘制多边形。
  • points="200,10 250,190 160,210"：这个属性定义了多边形的顶点坐标。在这个例子中，多边形有三个顶点：(200,10), (250,190) 和 (160,210)。
  • style="fill:red;stroke:purple;stroke-width:1"：这设置了多边形的样式。
    • fill:red：设置填充颜色为红色。
    • stroke:purple：设置线条颜色为紫色。
    • stroke-width:1：设置线条宽度为1像素。

综上，这段代码会在一个500x210像素的SVG图像中绘制一个由三个顶点定义的多边形，填充颜色为红色，线条颜色为紫色，线条宽度为1像素。

示例二：

画一个五角星

css 复制代码 
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:5"/>
</svg>

效果：

代码解析:

  • <polygon>：这是一个多边形元素，用于在SVG图像中绘制多边形。
  • points="100 10,40 180,190 60,10 60,160 180"：这个属性定义了多边形的顶点坐标。在这个例子中，多边形有七个顶点：(100,10), (40,180), (190,60), (10,60), (160,180)。
  • style="fill:none;stroke:black;stroke-width:5"：这设置了多边形的样式。
    • fill:none：设置填充颜色为无色。
    • stroke:black：设置线条颜色为黑色。
    • stroke-width:5：设置线条宽度为5像素。

综上，这段代码会在一个300x300像素的SVG图像中绘制一个由七个顶点定义的多边形，没有填充颜色，线条颜色为黑色，线条宽度为5像素。

10.7 路径

路径数据：

  1. M (moveto): 该命令开始一个新的路径，并设置当前点。其后的命令将从这个点开始绘制线条或曲线。

  2. L (lineto): 该命令从当前点绘制一条直线到指定点。

  3. H (horizontal lineto): 该命令从当前点绘制一条水平线到指定x坐标。y坐标保持不变。

  4. V (vertical lineto): 该命令从当前点绘制一条垂直线到指定y坐标。x坐标保持不变。

  5. C (curveto): 该命令绘制一个贝塞尔曲线，需要提供三个点：控制点和结束点。

  6. S (smooth curveto): 该命令绘制一个平滑的贝塞尔曲线，它使用前一个点和当前点作为控制点，并连接到下一个点。

  7. Q (quadratic Bézier curve): 该命令绘制一个二次贝塞尔曲线，需要提供两个点：控制点和结束点。

  8. T (smooth quadratic Bézier curveto): 该命令绘制一个平滑的二次贝塞尔曲线，它使用前一个点和当前点作为控制点，并连接到下一个点。

  9. A (elliptical Arc): 该命令绘制一个椭圆弧，需要提供起始角度、结束角度、半径和旋转角度等参数。

  10. Z (closepath): 该命令关闭路径，将当前点连接到起始点，形成一个封闭图形。

示例：

画一个三角形

ini 复制代码 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L205 270 Z" />
</svg>

效果：

代码解析:

  • <path>：这是一个路径元素，用于绘制线条和曲线。
  • d="M150 0 L75 200 L205 270 Z"：这是路径的指令。这些指令定义了图形的形状和位置。
    • M150 0：移动到(150, 0)点。
    • L75 200：从当前点绘制一条直线到(75, 200)点。
    • L205 270：从当前点绘制一条直线到(205, 270)点。
    • Z：关闭路径，将当前点连接到起始点，形成一个封闭图形。

综上，这段代码将在SVG图像中绘制一个由三个直线段组成的封闭图形，其顶点坐标分别为(150, 0)，(75, 200)和(205, 270)。

11. 设置样式

11.1 属性样式

直接在元素属性上设置样式，比如将矩形填充色改成粉红

ini 复制代码 
<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="pink"
  />
</svg>

11.2 内联样式

把所有样式写在 style 属性里

ini 复制代码 
<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    style="fill: pink;"
  />
</svg>

11.3 内部样式

将样式写在 <style> 标签里

ini 复制代码 
<style>
  .rect {
    fill: pink;
  }
</style>

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    class="rect"
  />
</svg>

11.4 外部样式

将样式写在 .css 文件里，然后在页面中引入该 CSS 文件。

12. SVG动画

SVG动画可以通过多种方式实现，包括使用SMIL、CSS和JavaScript。

12.1 SMIL

能让SVG不靠JavaScript与CSS就能动起来是因为使用了SMIL（Synchronized Multimedia Integration Language），是W3C的标准之一，旨在以XML格式提供多媒体的交互表现（白话点其实就是动画），是Web上动画的开路先锋，启发了Web animation与CSS animation。SVG与SMIL的开发团队合作，让SVG能利用SMIL达到如下效果：

  1. 动画化元素的数值属性
  2. 动画化元素的transform属性（平移、旋转）
  3. 动画化元素颜色
  4. 轨迹路线移动动画，类似于CSS中的offset-path

光是这些特性就够我们组合出很多种的动画了， 使用方法也不难，只要在SVG元素内置入以下四种元素即可操作动画：

  • <set>
  • <animate>
  • <animateTransform>
  • <animateMotion>

例如：

xml 复制代码 
<circle cx="56.7573"cy="92.8179"r="2"fill="black"stroke="black"stroke-width="1">
    <set attributeName="cy"to="105.7318"begin="2s"/>
</circle>

代码解析：

这段代码用于描述一个圆形，并在特定时间改变其中心点的y坐标。

  1. <circle cx="56.7573" cy="92.8179" r="2" fill="black" stroke="black" stroke-width="1" />

    • <circle>: 这是一个SVG元素，用于绘制一个圆形。
    • cx="56.7573" 和 cy="92.8179": 定义了圆心的x和y坐标。这里，圆心的初始位置是(56.7573, 92.8179)。
    • r="2": 定义了圆的半径为2单位。
    • fill="black": 定义了圆的填充颜色为黑色。
    • stroke="black": 定义了圆的边框颜色为黑色。
    • stroke-width="1": 定义了圆的边框宽度为1单位。

  2. <set attributeName="cy" to="105.7318" begin="2s"/>

    • <set>: 这是一个SVG动画元素，用于改变元素的属性。
    • attributeName="cy": 指定要改变的属性是cy，即中心点的y坐标。
    • to="105.7318": 指定新的属性值，即圆心的y坐标将变为105.7318。
    • begin="2s": 指定动画开始的时间，这里表示动画将在2秒后开始。

综上，这段代码绘制了一个半径为2单位、填充和边框颜色均为黑色的圆形，并设置了一个动画，使圆心的y坐标在2秒后从92.8179变为105.7318。

12.2 基于 CSS 的 SVG 动画

通过设置一组 CSS 样式和关键帧，可以实现基于时间或基于事件的 SVG 动画。这种方式实现的 SVG 动画相对简单，具有易于实现、可读性好、易于维护、性能良好等优点。

下面是一个基于 CSS 的 SVG 动画示例，实现了一个圆形的旋转动画：

xml 复制代码 
<svg>
  <circle cx="50" cy="50" r="40" />
</svg>

<style>
  circle {
    fill: red;
    animation: rotate 2s linear infinite;
  }
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
</style>

12.3 基于 JavaScript 的 SVG 动画

通过 JavaScript，可以对 SVG 图形进行更加自由和复杂的动画操作。JavaScript 可以对 SVG 元素的各种属性，如位置、大小、颜色、透明度、路径等进行操作，配合定时器和事件监听等方法，实现丰富多彩的 SVG动画。

下面是一个基于 JavaScript 的 SVG 动画示例，实现了一个小球自由落体，碰撞弹跳的效果：

ini 复制代码 
<svg>
  <circle id="ball" cx="50" cy="50" r="20" />
</svg>

<script>
  let ball = document.querySelector("#ball");
  let startPos = 50;
  let endPos = 200;
  let speed = 3; // 设置球下落速度
  let gravity = 0.2; // 设置加速度

  function moveBall() {
    let pos = parseFloat(ball.getAttribute("cy"));
    let vel = parseFloat(ball.getAttribute("data-vel")) || 0;

    // 计算球的速度和位置
    vel += gravity;
    pos += vel * speed;

    // 碰撞检测
    if (pos + 20 > endPos) {
      pos = endPos - 20;
      vel = -vel * 0.8;
    }

    // 更新球的位置和速度
    ball.setAttribute("cy", pos);
    ball.setAttribute("data-vel", vel);

    // 循环移动球
    if (pos < endPos - 20) {
      window.requestAnimationFrame(moveBall);
    }
  }

  moveBall();
</script>

13. API一览表

14. 总结

总的来说，SVG是一种强大的图形描述语言，具有可缩放性、交互性、可访问性、灵活性和跨平台兼容性等特点和优势。它可以用于创建各种复杂的二维矢量图形和富交互的Web应用，为Web设计和开发提供了更多的可能性。

随着Web技术的不断发展，相信SVG的应用范围还将不断扩大。

相关推荐
涔溪12 分钟前
css3弹性布局
前端·css·css3
Array[赵]25 分钟前
npm 最新国内淘宝镜像地址源 (旧版已不能用)
前端·npm·node.js
于慨26 分钟前
pnpm报错如Runing this command will add the dependency to the workspace root所示
前端·npm
李豆豆喵1 小时前
第29天：安全开发-JS应用&DOM树&加密编码库&断点调试&逆向分析&元素属性操作
开发语言·javascript·安全
田本初1 小时前
【NodeJS】Express写接口的整体流程
前端·javascript·node.js·express
知野小兔1 小时前
【Vue】Keep alive详解
前端·javascript·vue.js
好奇的菜鸟1 小时前
TypeScript中的接口（Interface）：定义对象结构的强类型方式
前端·javascript·typescript
小胖霞1 小时前
monorepo和pnpm
前端
橘子味的冰淇淋~1 小时前
全面解析 Map、WeakMap、Set、WeakSet
前端·javascript·vue.js
小闫BI设源码1 小时前
uniapp中的事件:v-on
前端·vue.js·uni-app
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04基于微信小程序的自习室预约系统的设计与实现05玄机平台应急响应—webshell查杀06PyTorch机器学习实现液态神经网络07Docker 夺命连环 15 问0804 - matlab m_map地学绘图工具基础函数 - 设置网格09RAG 实践- Ollama+RagFlow 部署本地知识库10【软考经验分享】软考-中级-嵌入式备考