- 综合排序
- 最热优先
- 最新优先
- 来自专栏腾讯技术工程官方号的专栏
卡牌特效: svg不规则倒计时动效
虚线效果 实现这个效果的重点在circle的stroke-dasharray属性，stroke-dasharray在SVG中表示的是描边虚线。 需要传入两个值，第一个是虚线的宽度，第二个是虚线之间的间距stroke-dashoffset，下面看一下用stroke-dasharray实现的虚线效果： <svg width 实现圆环 从上面的虚线图可以看出，stroke-width表示虚线的“高度”，虚线的宽度是stroke-dasharray的第一个参数值，虚线间隔是stroke-dasharray的第二个参数值。 在实现圆环效果时，也是这个原理，stroke-width表示圆环的边框宽度，stroke-dasharray的第一个参数为圆环边框的可见长度，stroke-dasharray的第二个参数为圆环边框的非可见长度 如果把stroke-dasharray设置为"0 a"，其中a大于等于圆环的周长时。
2.7K30发布于 2019-07-17 - 来自专栏腾讯IMWeb前端团队
svg描边绘制动画实现方式
3动画实现的两种原理 在这里我们需要运用： stroke-dashoffset和stroke-dasharray两个属性： stroke-dashoffset属性是指虚线的起始偏移量。 stroke-dashoffset说明 stroke-dasharray属性指虚线段的样式（实线段长度、间隔段长度） stroke-dasharray说明 这个两种原理呢。 也就是利用CSS改变stroke-dashoffset或者stroke-dasharray，即一种是虚线线段不变的情况下改变偏移量，另一种是偏移量不变的情况下改变虚线线段长度。 stroke-dashoffset stroke-dasharray 原理一、通过改变stroke-dashoffset css代码片段： 原理二、通过改变stroke-dasharray css
1.9K20编辑于 2022-06-29 - 来自专栏web秀
线条之美，玩转SVG线条动画
更容易理解一些： 因此，我们之前的路径就会变成这个样子： #path { stroke-dasharray: 3px, 1px; stroke-dasharray: 0; } 效果： ? 理解了stroke-dasharray的作用之后，下面我们就可以使用css3的animation来让这个路径动起来。 511px; } 100%{ stroke-dasharray: 511px, 511px; } } 效果： ? 然后过渡到 stroke-dasharray: 511, 511; 因为整个线条的长度就是 511，而实线的长度也慢慢变成511，所以整个线条就出现了。 { 50%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; } 70%{ stroke-dasharray
2.3K30发布于 2019-09-05 - 来自专栏Coco的专栏
【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画
基于 SVG 的线条动画效果 谈到线条动画，尤其是不规则路径或者是复杂路径，我们第一时间应该想到的就是 SVG 中的 stroke-dasharray 和 stroke-dashoffset。 : 20, 20; } 就可以得到这么一个图形： 当然，这里可能有人不太了解 stroke-dasharray，简单说明一下。 但是，每段虚线的长度、每段虚线线段的长度是无法控制的，在 SVG 中利用 stroke-dasharray 就可以进行控制。 : 10 10; } .rect2 { stroke-dasharray: 30 30; } .rect3 { stroke-dasharray: 50 20; } 这样，我们就能得到不同的虚线边框样式 也看一个简单的例子： .rect1 { stroke-dasharray: 10 20 30 40 50 60; stroke-dashoffset: 0; } .rect2 { stroke-dasharray
1.7K10编辑于 2024-05-07 - 来自专栏全栈技术
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
stroke:none;stroke-width:12.90430737;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray fill-opacity:1;stroke-width:5.85319996;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray fill-opacity:1;stroke-width:5.85319996;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray stroke:none;stroke-width:13.78312874;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray stroke:none;stroke-width:13.21567822;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray
80520发布于 2021-08-23 - 来自专栏前端自习课
【拓展】SVG实现环形进度条的原理
stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray 471px; } to { stroke-dashoffset: 0px; } } 实现原理 实现原理非常简单，就是应用svg的stroke-dashoffset和stroke-dasharray stroke-dasharray 官方解释为可控制用来描边的点划线的图案范式，即定义虚线每段长度即虚线间间隔，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。 document.querySelector('#path'); // 可获取路径的长度 let len = path.getTotalLength(); path.style.cssText = `stroke-dasharray
1.5K30发布于 2020-11-03 - 来自专栏Coco的专栏
【Web动画】SVG 线条动画入门
: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } } 这尼玛是什么 CSS？ ：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度； stroke-dashoffset：则是虚线的偏移量 重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。 属性 stroke-dasharray 可控制用来描边的点划线的图案范式。 它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。 } 100%{ stroke-dasharray: 1350, 1350; } } stroke-dasharray: 0, 1350;，表示线框短划线和缺口的长度分别为 掌握了这个技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景： SVG 线条动画实现按钮交互 ?
3K21发布于 2018-05-28 - 来自专栏wujunmin
Power BI模拟小米运动APP三环效果
circle cx='60' cy='60' r='" & r_calories & "' stroke='DarkOrange' stroke-opacity='0.3' stroke-width='15' stroke-dasharray none'/> <circle cx='60' cy='60' r='" & r_calories & "' stroke='DarkOrange' stroke-width='15' stroke-dasharray ' fill='none'/> <circle cx='60' cy='60' r='" & r_steps & "' stroke='Gold' stroke-width='15' stroke-dasharray cx='60' cy='60' r='" & r_move_min & "' stroke='DeepSkyBlue' stroke-opacity='0.3' stroke-width='15' stroke-dasharray none'/> <circle cx='60' cy='60' r='" & r_move_min & "' stroke='DeepSkyBlue' stroke-width='15' stroke-dasharray
64320编辑于 2022-12-13 - 来自专栏程序员成长指北
SVG实现环形进度条的原理
stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray 471px; } to { stroke-dashoffset: 0px; } } 实现原理 实现原理非常简单，就是应用svg的stroke-dashoffset和stroke-dasharray stroke-dasharray 官方解释为可控制用来描边的点划线的图案范式，即定义虚线每段长度即虚线间间隔，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。 document.querySelector('#path'); // 可获取路径的长度 let len = path.getTotalLength(); path.style.cssText = `stroke-dasharray
1.2K20发布于 2020-11-11 - 来自专栏web秀
SVG 线条动画基础入门知识
图形设定边框宽度； stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色； stroke-linejoin | stroke-linecap：设定线段连接处的样式； stroke-dasharray ：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度； stroke-dashoffset：则是划线与间隔的偏移量 重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。 属性 stroke-dasharray 可控制用来描边的点划线的图案范式。 SVG 矩形只留底边 这里我们给按钮添加stroke-dasharray： .shape { ... stroke-dasharray: 160 520; stroke-dashoffset: -460; } ? : 160 520; stroke-dashoffset: -460; stroke-width: 4px; } 100% { stroke-dasharray
3.6K30发布于 2019-09-04 - 来自专栏wujunmin
Power BI图表虚线化
在DAX结合SVG矢量图自定义的图表中，添加stroke-dasharray参数即可，上方条形图的度量值如下： 虚线-条形 = VAR MaxValue = MAXX ( ALLSELECTED <rect rx='2' x='0' y='0.2' width='99.8' height='5.6' fill='none' stroke='Grey' stroke-width='0.2' stroke-dasharray stroke-dasharray中的数值可以是一位也可以是多位，如果是多位则用逗号或空格隔开，示例是两位。效果图的虚线可以看到是均匀的，即短线长度和间隔长度相等。 如何变为不均匀的，stroke-dasharray的两个值设置为不相等即可。
2.3K10编辑于 2022-12-13 ＞＞运维管理：Typora工具之画图
style id1 fill:#f0f0f0,stroke:#ccc style file1 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray : 2, 0 style file2 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0 style file3 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0 style file4 fill:#ffffed,stroke :orange,stroke-width:1px,stroke-dasharray: 2, 0 style file5 fill:#ffffed,stroke:orange,stroke-width :1px,stroke-dasharray: 2, 0 style file6 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray
92330编辑于 2023-10-10- 来自专栏IMWeb前端团队
初窥 SVG Path 动画
属性 stroke-dasharray：该值可能由两个值合写，使用英文逗号(,)分隔，第一个值是画出的每段实线线段的长度，第二个值是各段之间空隙的长度。如果无分隔，则说明两个值都是一样大小的。 举例而言，如果要实现类似 CSS 中 border-style: dotted; 这样的虚线效果，则可以设置 stroke-dasharray:5,10，第一个数字表示每一段实线长度为 5，第二个表示实线直接间隔长度为 和stroke-dashoffset 我们设置 stroke-dasharray 和 stroke-dashoffset 的值都为 888，这个值恰好是路径的长度。 <style> .mypath { stroke: #05D380; stroke-width: 2; stroke-dasharray: 888; stroke-dashoffset <style> .mypath { stroke: #05D380; stroke-width: 2; stroke-dasharray: 888; stroke-dashoffset
2.7K20发布于 2019-12-04 - 来自专栏IMWeb前端团队
初窥 SVG Path 动画
属性 stroke-dasharray：该值可能由两个值合写，使用英文逗号(,)分隔，第一个值是画出的每段实线线段的长度，第二个值是各段之间空隙的长度。如果无分隔，则说明两个值都是一样大小的。 举例而言，如果要实现类似 CSS 中 border-style: dotted; 这样的虚线效果，则可以设置 stroke-dasharray:5,10，第一个数字表示每一段实线长度为 5，第二个表示实线直接间隔长度为 和stroke-dashoffset 我们设置 stroke-dasharray 和 stroke-dashoffset 的值都为 888，这个值恰好是路径的长度。 <style> .mypath { stroke: #05D380; stroke-width: 2; stroke-dasharray: 888; stroke-dashoffset <style> .mypath { stroke: #05D380; stroke-width: 2; stroke-dasharray: 888; stroke-dashoffset
3.3K60发布于 2017-12-29 - 来自专栏京程一灯
SVG 路径动画简易指南
因此我们第一步需要利用到 SVG 的两个属性： stroke-dasharray 和 stroke-dashoffset 。 ? stroke-dasharray 属性可以控制图案描边路径的样式，如果你并不想用连续的直线去绘制路径，而希望通过一些不同样式的虚线，你就可以使用这个属性。 由于 SVG 图形其实也是浏览器 DOM 的组成部分，因此 stroke-dasharray 作为一个控制外观的属性，也可以直接用作一个 CSS 样式属性，达到同样的设置效果。 属性设置虚线段的长度，将 stroke-dasharray 属性的值设为该路径的长度。 stroke-dasharray 和 stroke-dashoffset 是创造大量 SVG 路径动画所要用到的两个重要属性，你可以点击这里（一个方便的小工具）来体会这两个属性。
4.4K20发布于 2019-03-27 - 来自专栏Coco的专栏
巧用 CSS 实现动态线条 Loading 动画
: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } 简单解释下： stroke ：类比 css 中的 border-color，给 svg 图形设定边框颜色； stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度; stroke-dashoffset 我们利用 stroke-dasharray 将原本完整的线条切割成多段，假设是 stroke-dasharray: 10, 10 表示这样一个图形： 第一个 10 表示线段的长度，第二个 10 表示两条可见的线段中间的空隙 ，只有一个点： 同理，stroke-dasharray: 89, 200 表示： 通过 animation，让线段在这两种状态之间补间变换。
1.4K31编辑于 2022-03-10 CANN 编译器深度解析：UB、L1 与 Global Memory 的协同调度机制
animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-wYOGZcKHPjRYXBHU .edge-animation-fast{stroke-dasharray edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-wYOGZcKHPjRYXBHU .edge-pattern-dashed{stroke-dasharray :3;}#mermaid-svg-wYOGZcKHPjRYXBHU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wYOGZcKHPjRYXBHU 259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-wYOGZcKHPjRYXBHU .innerArc{stroke-width:1.5;stroke-dasharray :none;}#mermaid-svg-wYOGZcKHPjRYXBHU .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333
10210编辑于 2026-02-09- 来自专栏前端壹栈
三种 Loading 制作方案
为了给圆环添加转动效果，我们需要绘制带缺口的圆环，后面通过改变缺口的位置大小来实现转动效果，如: .path { stroke-dasharray: 95, 126; /*设置实线长95，虚线长 因为该圆环的周长为23.1420=125.6，约等于126，stroke-dasharray设置了实线(可见部分)长为95，约等于圆的3/4，所以只能绘制到圆环的最高点位置，接下来是126的虚线，但是圆环周长只有 接下来就是添加圆环的转动效果，分别设置三个动画状态，如: // 0% { stroke-dasharray: 1, 126; /*实线部分1，虚线部分126*/ stroke-dashoffset // 50% { stroke-dasharray: 95, 126; /*实线部分95，虚线部分126*/ stroke-dashoffset: -31px; /*顺时针偏移31/126 // 100% { stroke-dasharray: 6, 120; /*实线部分6，虚线部分120*/ stroke-dashoffset: -120px; /*最后顺时针偏移120
4.2K10发布于 2021-01-08 - 来自专栏小轻论坛
纸飞机（可复制源代码）
stroke-width='15' stroke-linecap='round'> <line class="line" stroke-dashoffset="5208.54" stroke-dasharray y1="-83" x2="816.3" y2="1690.9" /> <line class="line" stroke-dashoffset="5372.94" stroke-dasharray x2="408.9" y2="1654.3" /> <line class="line" stroke-dashoffset="5628.66" stroke-dasharray y1="-87.6" x2="-38.7" y2="1634.3" /> <line class="line" stroke-dashoffset="5843.54" stroke-dasharray
86010编辑于 2024-09-30 - 来自专栏高端IT
封装环形加载进度条（Vue插件版和原生js版）
1、效果预览 2、用到的知识 主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。 在看下面文章之前，你需要了解 12 <! demo</title> <style type="text/css"> #line{ transition: all 2s; stroke-dasharray stroke-dashoffset: 0; } #circle{ transition: all 2s; stroke-dasharray
3.7K20编辑于 2022-05-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号