关于stroke-dasharray和stroke-dashoffset的理解

Question

1.stroke在图像边界上画线
2.stroke-dasharray用于创建虚线，其值可以是一个数组

stroke-dasharray = '10'
stroke-dasharray = '10, 5'
stroke-dasharray = '20, 10, 5'

（1）当参数为1个时，表示每段虚线和虚线之间的距离相等
（2）当参数为两个或多个时，一个表示虚线长度一个表示虚线的间距然后依次往后推，循环往复

3.stroke-dashoffset 是偏移的意思(虚线的偏移量)
这个属性是相对于起始点的偏移，值>0，表示向左(逆时针)，值<0,表示向右(顺时针)，
不管往哪个方向偏移，dasharray都是循环的

举个例子：
stroke-dasharray=‘ 100 ， 50 ’
假设我现在是一个长条形的svg宽度设置为100
这个时候SVG图形的描边就是全黑色的边框包裹

stroke-dashoffset=‘ 50 ’
整个stroke描线向左移动了50
（图上画的stroke看似是100+50，但是stroke是循环的，可以理解为无限长的）

有了这两个属性的基本了解之后，怎么画出进度条就有思路了，
用虚线长度表示以播放的进度，用间隔距离表示没有播放的进度

<circle
          id="circle"
          cx="100"
          cy="100"
          r="50"
          fill="gray"
          stroke-width="5"
          stroke="green"
        />

定义一个圆，设置半径为50，这时候圆的周长大概就是314 （周长=2πr）

stroke-dasharray: 314, 314;

我们设置虚线长度和间隔距离都是圆的周长，效果如下


因为没有设置偏移量，虚线的长度又和圆周长相等，所以虚线将circle包起来了，看不到空白间距

stroke-dashoffset=‘ 314 ’

因为stroke-dashoffset>0，所以整个stroke向左偏移了314个单位(圆的整个周长)所以这里看不到虚线只能看到空白间距
这里就是进度条的初始状态了，播放状态：0 -> 1 就对应着 stroke-dashoffset偏移量 314 - > 0

（默认初始位置在圆最右侧，可以设置外层svg transform:roate(-90deg)逆时针转动90度摆正）

Answer 1

月入三千不是梦 2022-06-09 11:04:24

太棒了！