开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何制作一条svg动画虚线？

要制作一条SVG动画虚线，可以通过SVG的<path>元素和<animate>元素结合来实现。

以下是一种实现方式：

首先，在SVG文档中创建一个<path>元素，并设置其属性d为定义虚线的路径。例如，可以使用M命令移动到起始点，然后使用L命令绘制一条直线。如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <path id="dash-line" d="M50 200 L350 200" fill="none" stroke="black" stroke-dasharray="5,5" stroke-width="2" />
</svg>

接下来，使用<animate>元素来实现路径的动画效果。在<path>元素内部添加一个<animate>元素，并设置其属性values为起始路径和结束路径，duration为动画时长，repeatCount为动画重复次数。如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <path id="dash-line" d="M50 200 L350 200" fill="none" stroke="black" stroke-dasharray="5,5" stroke-width="2">
    <animate attributeName="d" dur="3s" repeatCount="indefinite"
             values="M50 200 L350 200; M50 200 L350 300" />
  </path>
</svg>

在上面的代码中，<path>元素的d属性在两个值之间变化，从起始路径M50 200 L350 200到结束路径M50 200 L350 300。动画的时长为3秒，并且设置为无限循环。

通过以上步骤，就可以制作一条SVG动画虚线。根据实际需求，可以调整路径和动画的属性值来实现不同的效果。

推荐的腾讯云相关产品：无

SVG动画虚线的示例代码参考链接：点击这里

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

SVG 路径动画简易指南

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！ SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

02

Web版Scada实现管道流水/电机转动最简单的方式

这段代码实现的功能是在SVG画布上绘制一条橙色的虚线，并且让这条虚线不断地重复移动。代码步骤解释：

01

初窥 SVG Path 动画

本文主要介绍了如何使用 SVG Path 实现绘制可循环播放的动画，包括动画的起点、终点和循环路径，以及如何使用 CSS3 的 keyframes 和 animation 实现动画效果。同时，还介绍了一些 SVG Path 的常见属性，包括 stroke-dasharray、stroke-dashoffset 等，以及如何通过修改这些属性来实现动画效果。

06

初窥 SVG Path 动画

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题，是因为在项目中有要求用到它。所谓 SVG Path 动画，就是让图形有像人实时绘制一样的动画效果，就比如下面这种：

02

WPF使用Shape实现复杂线条动画

看到巧用 CSS/SVG 实现复杂线条光效动画的文章，便也想尝试用WPF的Shape配合动画实现同样的效果。ChokCoco大佬的文章中介绍了基于SVG的线条动画效果和通过角向渐变配合 MASK 实现渐变线条两种方式。WPF中的Shape与SVG非常相似，因此这种方式也很容易实现。但WPF中仅有的两种渐变画刷不包含角向渐变，本文使用了另外两种方式实现同样的效果。

01

【Web动画】SVG 线条动画入门

通常我们说的 Web 动画，包含了三大类。 CSS3 动画 javascript 动画（canvas） html 动画（SVG）个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论

02

三种 Loading 制作方案

Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。

01

卡牌特效: svg不规则倒计时动效

导语：直播过程中，往往会有各种动画特效增强直播效果，近期需求中，设计要求在企鹅电竞PC官网上实现一种卡牌效果，在不规则图片上叠加倒计时效果。前端项目中，往往使用css来完成动画，像倒计时效果也可以使用css完成，但是相对来说css实现方案比较复杂，层次嵌套较多。倒计时动效要求覆盖图片的倒计时阴影为非规则且半透明的。在日常的圆环动画中，也会有类似的倒计时效果，只不过圆环是规则的，实现起来比较简单。但是基于圆环效果，再加上svg的mask特性，就可以实现此类特殊效果。 [ 实现动态图] css的m

03

探秘神奇的运动路径动画 Motion Path

CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到：

05

【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画

简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。

01

【拓展】SVG实现环形进度条的原理

之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：

03

让文字沿着路径动起来 (SVG)

由于我对 SVG 也不是太熟悉，有些地方可能有所疏漏，有什么疑问欢迎留言，有什么写错的地方，欢迎指出哈。

07

SVG实现环形进度条的原理

之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：

02

用 SVG 描边动画送一份平安夜祝福

SVG 是用 Illustrator 画的，苹果是手绘的（虽然是画的丑了点 0.0）。

05

SVG基础知识

之前有提到过SVG描边动画，可以实现很神奇的手写签名动画效果，当然，理论上可以用来实现任意不规则路径填充动画

02

纯 CSS 实现波浪效果

1写在前面使用纯 CSS 实现波浪效果不再困难，CSS 奇技淫巧。一直以来，使用纯 CSS 实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的。先看看，非 CSS 方式实现的波浪效果： 2非CSS实现方式使用 SVG 实现波浪效果借助 SVG ，是很容易画出三次贝塞尔曲线的。看看效果：代码如下：画出三次贝塞尔曲线的核

02

SVG学习笔记，持续记录。

SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape，例如：由直线和曲线组成的路径）、图像(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（nestedtransformations）、剪切路径（clippingpaths）、alpha蒙板（alphamasks）、滤镜效果（filtereffects）、模板对象（templateobjects）和其它扩展（extensibility）。

04

复杂网页动画的实现

想知道凡泰极客首页中酷炫的粒子与动画效果是如何实现的吗，说不定本文会给你带来些新思路。

03

一个比想象中更骚气的圆-svg实现

之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环)，其实SVG也可以实现类似的效果，而且两者api惊人的相似。关于SVG SVG是一种矢量图形，在图形改变尺寸的情况下质量不会损失。相比canvas，svg有一个很大的优势就是内联进html的时候可以像操作dom一样操作svg，这样做起动画来非常方便。本文不会介绍svg的基础知识，不过也没涉及什么复杂的东西，基于xml的语法还是比较好理解的。期望实现的效果和Canvas一样是颜色非对称的沿着圆周进行渐变。 SVG的渐变和之前讲ca

07

用动画的方式画出任意的路径（直线、曲线、折现）

发布于 2017-11-20 00:49 更新于 2017-11-20 01:07

02

UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

本篇作为技术分享系列的第一篇，详细讲一下 SVG 的解析和绘制，这部分功能的研究和最终实现由团队的 @黄超超同学负责，感谢提供技术文档和支持。首先我们来看一下 SVG 的文件结构和组成 SVG

09

【效果高能】你不知道的 Animation 动画技巧

在大多数需求中，css3 的 transition / animation 都能满足我们的需求，并且相对于 js 实现，可以大大提升我们的开发效率，降低开发成本。

02

HTML5(九)——超强的 SVG 动画

SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？

04

HTML5(九)——超强的 SVG 动画

SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？

03

HTML5(九)——超强的 SVG 动画

SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？

02

svg描边绘制动画实现方式

0写在前面这篇文章主要讲利用SVG来实现web页面上的描边绘制动画的两种原理。同时涉及到从AI软件导出SVG的方法。 1案例效果扫光效果和描边效果，如图： 2SVG的导出方法首页需要设计师做一个相同或者等比文字矢量图，也就是AI文件。用AI打开文件之后利用左侧工具栏里的“直接选择工具”，全选之后右击“转化成复合路径”，然后菜单里选择“将文档存储为SVG”。这样导出来的就是path路径代码了。如图所示：举例：导出之后的代码片段，比如案例“hello”代码片段里有些属性是AI软件自动

02

【工具】977- 10个实现炫酷UI设计效果的CSS生成工具

英文 | https://mattkarski.medium.com/10-amazing-css-generators-for-ui-design-1f790791c4e7

02

Power BI表格矩阵穿墙术

正常情况下Power BI表格矩阵的数据被困在方方正正的格子里，这与Excel没有什么不同。但我们可以借助小技巧实现穿透的视觉错觉，从而制造丰富的可视化效果。

02

SVG初识

个人认为现在svg可能有点过时了，svg的很多功能css3或者canvas都能做到很好的效果，

02

关于 CSS 反射倒影的研究思考

原文：The State of CSS Reflections 译者：nzbin 友情提示：由于演示 demo 的兼容性，推荐火狐浏览。该文章篇幅较长，内容庞杂，有一定难度。而我本人学识有限，加之时间仓促，所翻译内容可能有不恰当及晦涩之处。欢迎大家拍砖指正。我最近在 codePen 上看到了这个加载程序，一个纯 CSS 制作的带有渐变反射的 3D 旋转竖条。它的制作方法是：为每个竖条创建一个元素，然后通过复制每一个元素来制作反射倒影，最后在反射倒影上添加渐变背景来制作渐隐的效果。听上去有点复杂，而且创建

09

线条之美，玩转SVG线条动画

通常来说web前端实现动画效果主要通过下面几种方案： 1. css动画: 利用css3的样式效果可以将dom元素做出动画的效果来。 2. canvas动画: 利用canvas提供的API，然后利用清除-渲染这样一帧一帧的做出动画效果。 3. svg动画: 同样svg也提供了不少的API来实现动画效果，并且兼容性也不差，本文主要讲解一下如何制作svg线条动画。

03

H5动效的常见制作手法 - 腾讯ISUX

众所周知，一个元素，动往往比静更吸引眼球；一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表

02

纯 CSS 实现波浪效果！

一直以来，使用纯 CSS 实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CAN

04

前端-纯CSS实现波浪效果！

当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。

03

SVG图形绘制入门第一弹

之前很长一段时间，我是不重视SVG的，认为他就是在AI里画画，然后导出来做个矢量图标。直到我在上家公司遇到图表的绘制，因为不会写不得已而拿插件实现，而插件绘制的SVG代码又因为看着非常吃力甚至看不懂，导致自己严重受挫。到那个时候我才从基础正式开始学习SVG。关于SVG的文章和教程网络上有很多，我这一系列的ABC其实是我自己的一个学历历程，对于高手应该没有太大的帮助，对于还没有怎么写过的同学，可以一起开始学习。首先先来认识一下SVG： SVG可缩放矢量图形（Scalable Vector Graphi

07

Lottie使用技巧

首先，你需要安装好插件，可以装Bodymovin或者LottieFile（https://lottiefiles.com/plugins/after-effects）

06

复杂帧动画之移动端video采坑实现

Airbnb 开源项目，通过解析 AE 动画为 json 数据，支持跨平台的动画效果解决方案；lottie 在辅导中已经有实际应用，使用过的同学都表示对其实现效果和开发速度表示称赞和推荐。

01

SVG的动态之美-搜狗地铁图重构散记

搜狗地图发布了新版的移动端地铁图，改版初衷是为了用户交互体验的提升以及性能的改善。原版地铁图被用户吐槽最多的是pinch缩放不流畅、无过渡动画、拖拽边界不合理等等，大体上都是交互体验上的问题。实际上原版的问题不仅仅存在于交互体验上，源代码也是一团糟：无模块化概念；存在冗余逻辑和文件；滥用第三方库&工具； UI的更新仍旧是直接操作DOM；构建&发布流程不规范。以上问题其实跟业务以及技术选型无关，可以说是任何一个“历史悠久”的项目都难以避免的问题。针对以上问题的重构方案不是本文要阐述的核心，所以就一笔

00

【Flutter 绘制番外】svg 终篇 - 路径指令

上两篇我们通过对 svg 路径 M/H/V/L/C/Q/Z 几个指令的解析。把掘金 logo 的 svg ，转化为 Flutter 的原生路径绘制，并且附加了一些绘制效果。

01

CSS实用技巧总结

全名Don't Repeat Yourself，该原则适用于所有编程语言而不限于css。

02

【动画进阶】当路径动画遇到滚动驱动！

在一年前，我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline：革命性创新，动画杀手锏 @scroll-timeline。

03

CSS3、JS 探索三维粒子

一个鼓舞人心的演示，用three.js探索3D空间中的粒子动画。这种类型的动画可能非常适合页面加载器。

01

从UI到AI——移动端H5生成技术漫谈

内容来源：2017 年 7 月 29 日，百度资深研发工程师潘征在“2017谷歌开发者节北京站”进行《从 UI 到 AI —— 移动端 H5 页面生产技术漫谈》演讲分享。IT 大咖说（微信id：itdakashuo）作为独家视频合作方，经主办方和讲者审阅授权发布。阅读字数：2061 | 6分钟阅读摘要 Houdini 为 CSS 提供动态编程能力，让开发者介入布局与渲染的过程，带来无限扩展性。分享会用数个例子演示 Houdini 的神奇效果，同时介绍其现状。嘉宾演讲视频及PPT回顾：http://s

05

带圆角的虚线边框？CSS 不在话下

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：

01

将 SVG 与媒体查询结合使用

在 HTML 文档中，我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。将 SVG 与媒体查询一起使用时，我们可以做类似的事情。

00

CSS伪类：CSS3鼠标滑过按钮动画第三节

前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就到此结束了，本章结尾会对前3小节进行一定的总结。

02

SVG

HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。不过canvas更偏重于动画的制作。所以，绘制矢量图的大任落到了SVG身上。

04

Android 自定义标签 ViewLayout

自定义viewLayout实现标签View,UI的效果图如下：如图,我们要自己实现带描边的,带花括号的,带三角形,带对勾的这样一个layout ,并且对勾和中间的虚线我们都要用最基础的API绘制出

2023年，推荐10个让你事半功倍的CSS在线生产力工具

作为 Web 开发人员，CSS 是我们开展项目时必不可少的语言之一。我知道现在有很多框架可以让编写 CSS 代码比以往任何时候都容易得多。

03

CSS 奇思妙想边框动画

今天逛博客网站 -- shoptalkshow[1]，看到这样一个界面，非常有意思：

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭