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

前端小兮 10-12 106

前言：

现在你们对“csssvgbackground”大致比较看重，朋友们都需要知道一些“csssvgbackground”的相关内容。那么小编也在网络上网罗了一些有关“csssvgbackground””的相关文章，希望朋友们能喜欢，同学们快快来学习一下吧！

在我们阅读这篇文章之前，我们需要思考下，我们为什要去了解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的优势：

可扩展性和响应能力：SVG是使用形状，数字和坐标在浏览器中渲染图形，这使得它具有分辨率无关性和无限可伸缩性。不管我们画了什么图形，不论用户将页面放的多大，图形都不会失真，只是比例变化了而已。可编程性和交互性：SVG是完全可编辑和脚本可编写的，我们可以通过css和JavaScript将各种动画和交互添加到绘图中。无障碍：SVG文件是基于文本的，可以进行搜索和索引，这使得他们可以通过屏幕阅读器，搜索引擎和其他设备阅读。性能：与GIF，JPG和PNG相比，SVG通常是较小的文件。4. 劣势

SVG的劣势：

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

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

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

5. 使用方式

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

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

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

例如：

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

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

6. 使用场景图标和徽标：由于SVG可以无损缩放，所以非常适合用来做网站的图标和徽标，无论是在大屏幕还是小屏幕上，SVG都能保证清晰度。插画：任何钢笔或铅笔制作的传统绘图，都可以完美转化为SVG格式。动态图形：SVG的脚本特性使它可以用来创建动态的，交互式图形。之前我做过空调的SVG图片，然后由JavaScript控制空调上的开关，温度，模式。地图和图表：SVG可以绘制地图和图表，然后和JavaScript进行数据交互。游戏：虽然SVG不是专门用来做游戏的，但是一些游戏开发者会用SVG来制作游戏中的图形。

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

7. Canvas与SVG

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

基本概念：Canvas：是HTML5提供的 <canvas>标签，使用JavaScript在网页上绘制图形。它主要通过像素进行渲染，不支持事件处理器。SVG：全称为可伸缩矢量图形（Scalable Vector Graphics），是基于XML的二维图形语言。它由许多节点构成，每个被绘制的图形都被视为一个对象，如果SVG对象的属性发生变化，浏览器能够自动重现图形。特点：Canvas：依赖分辨率。不支持事件处理器。弱的文本渲染能力。能够以 .png 或 .jpg 格式保存结果图像。最适合图像密集型的游戏，其中的许多对象会被频繁重绘。SVG：基于矢量，能够很好地处理图形大小的改变。不支持事件处理器。弱的文本渲染能力。能够以 .png 或 .jpg 格式保存结果图像。性能：Canvas的历史没有SVG悠久，它是H5新增的标签，而SVG已经存在十几年。SVG图形节点足够多时，渲染会比较慢，而Canvas性能好一些。其他差异：Canvas适合带有大型渲染区域的应用程序（如谷歌地图）。SVG的复杂度高可能会减慢渲染速度（任何过度使用DOM的应用都不快）。

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

8. 实战一

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

<html><body><h1>Feng SVG</h1><svg version="1.1"  baseProfile="full"  width="300" height="200"  xmlns=";>  <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>

运行后：

代码解读：

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

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

10. SVG的基本形状10.1 矩形

示例一：

正常的矩形

<svg xmlns="; 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像素、线条颜色为黑色的矩形。

示例二：

填充和边框的透明度

<svg xmlns="; 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的矩形。

示例三：

整个元素的透明度

<svg xmlns="; 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的矩形。

示例四：

圆角矩形

<svg xmlns="; 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 圆形

示例：

<svg xmlns="; 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 椭圆

示例：

<svg xmlns="; 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 线

示例：

<svg xmlns="; 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 折线

示例一：

<svg xmlns="; 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，所以该多边形线段不会进行填充，只显示其黑色边框。

示例二：

画一个五角星

<svg style="height:300px;width:300px;" xmlns="; 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 多边形

示例一：

<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像素。

示例二：

画一个五角星

<svg style="height:300px;width:300px;" xmlns="; 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 路径

路径数据：

M (moveto): 该命令开始一个新的路径，并设置当前点。其后的命令将从这个点开始绘制线条或曲线。L (lineto): 该命令从当前点绘制一条直线到指定点。H (horizontal lineto): 该命令从当前点绘制一条水平线到指定x坐标。y坐标保持不变。V (vertical lineto): 该命令从当前点绘制一条垂直线到指定y坐标。x坐标保持不变。C (curveto): 该命令绘制一个贝塞尔曲线，需要提供三个点：控制点和结束点。S (smooth curveto): 该命令绘制一个平滑的贝塞尔曲线，它使用前一个点和当前点作为控制点，并连接到下一个点。Q (quadratic Bézier curve): 该命令绘制一个二次贝塞尔曲线，需要提供两个点：控制点和结束点。T (smooth quadratic Bézier curveto): 该命令绘制一个平滑的二次贝塞尔曲线，它使用前一个点和当前点作为控制点，并连接到下一个点。A (elliptical Arc): 该命令绘制一个椭圆弧，需要提供起始角度、结束角度、半径和旋转角度等参数。Z (closepath): 该命令关闭路径，将当前点连接到起始点，形成一个封闭图形。

示例：

画一个三角形

<svg xmlns="; 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 属性样式

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

<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 属性里

<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> 标签里

<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达到如下效果：

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

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

例如：

<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坐标。

<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单位。<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 动画示例，实现了一个圆形的旋转动画：

<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 动画示例，实现了一个小球自由落体，碰撞弹跳的效果：

<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的应用范围还将不断扩大。

原文链接：

本文地址：http://www.longkongtuishu.com/ca4c7DGsCDVUEDVY.html

标签： #csssvgbackground