SVG中的stroke-dasharray和stroke-dashoffset属性

该文章由 leevare 发布于 ,归类于 HTML/CSS

如果要实现如下的一个效果,该如何实现?

首先可以想到使用svg的path绘制一段这样的路径,然后接下来的事情就交给stroke-dasharraystroke-dashoffset来完成吧。

首先介绍一下stroke-dasharraystroke-dashoffset这两个属性。

stroke-dasharray介绍

MDN解释

属性stroke-dasharray可控制用来描边的点划线的图案范式。

这个属性可以传递两个值,第一个值表示实线的长度,第二个值表示虚线的长度。

举一个例子来了解这段话的含义。

<svg>
    <path d="M10,10 L50,10" stroke-width="1" stroke="#f00" fill="none"></path>
</svg>

展示的效果为一段直线。

如果为path添加上stroke-dasharray="10,10"属性后,将会变成这个样子。

看起来变成一条虚线。所以stroke-dasharray="10, 10"的含义是path路径变成实线(可见线段)和虚线(不可见线段)都是10像素的长度的效果。

可以看到,这个路径的长度是40像素,那么设置为stroke-dasharray="40, 10",此时将看不到虚线,是因为实线部分已经占据的路径的最大长度,虚线就显示不出来了。

stroke-dashoffset介绍

stroke-dashoffset 属性指定了dash模式到路径开始的距离。

就是说,stroke-dashoffset设置路径起始实线段的偏移量,正数表示起始点向前偏移,负数向后偏移。

以上述代码为例,为其添加stroke-dashoffset="20"属性。

<svg>
    <path
    d="M10,10 L50,10"
    stroke-width="1"
    stroke="#f00"
    fill="none"
    stroke-dasharray="40, 10"
    stroke-dashoffset="20"
    ></path>
</svg>

由于path路径本来的长度为40,并且设置了stroke-dasharray="40, 10",本应该只显示一个直线段的,但是由于设置了stroke-dashoffset="20",路径起始点向左偏移20像素,后面的虚线就显示了出来,为10像素,同时紧跟着虚线后面的是直线,由于只剩下10像素的空间,所以也显示为10像素,此时就展示为上图所示的样子。

利用这两个属性的特性,我们可以来实现文章一开始所描述的复杂路径的动画效果。

<style>
    .path {
      stroke: #8405d3;
      stroke-width: 2;
      stroke-dasharray: 350;
      stroke-dashoffset: 350;
      fill: none;
      animation: move 4s ease-in-out forwards;
    }
    @keyframes go {
      0% {
        stroke-dashoffset: 350;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
</style>
<svg>
    <path d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>

由于路径的长度有可能是不确定的,所以,可以使用js动态获取路径的长度为其添加动画效果。

const el = document.querySelector('.path')
const width = el.getTotalLength()

通过使用stroke-dasharraystroke-dashoffset这两个属性,可以制作出许多html普通元素难以实现的路径动画效果,是故,合理地利用不同的元素的特性,就能实现出更加炫酷的效果😀。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒