您的位置:首页> HTML5教程> SVG教程

SVG stroke-dashoffset

2018-8-21 00:19| 作者: admin| 查看: 1736| 评论: 0|来自: 蚂蚁部落

关于如何设置边框虚线可以参阅SVG stroke-dasharray虚线边框一章节。

stroke-dashoffset属性用来设置虚线模式距离路径起始位置的偏移尺寸。

恰当利用此属性可以制作比较美观的动态效果,下面通过代码实例对其进行详细分析。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
svg {
  border:1px solid red;
}
line{
  stroke-width:5px;
  stroke-dasharray:50;
}
</style>
</head>
<body>
<svg width="250" height="150">
  <defs>
    <linearGradient id="purple"
      x1="10" y1="10"
      x2="180" y2="10"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <line id="top" x1="10" y1="10"
    x2="180" y2="10"
    stroke-dashoffset="0"
    stroke="url(#purple)"
  />
  <line id="bottom" x1="10" y1="30"
        x2="180" y2="30"
        stroke-dashoffset="10"
        stroke="url(#purple)" />
</svg>
</body>
</html>

上面演示了stroke-dashoffset属性的用法,默认状态下虚线模式的偏移量是0,如第一个直线;第二个直线设置偏移量为10,可以很明显的观察到虚线模式向左偏移了。通过虚线模式的偏移,结合css3动画,可以实现非常美观的动画效果,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
svg {
  border:1px solid red;
}
path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}
 
@keyframes dash {
  from{
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>
</head>
<body>
<svg width="400" height="300">
  <path  
        fill="#FFFFFF"
        stroke="#000000"
        stroke-width="4"
        stroke-miterlimit="10"
        d="M66.039,133.545
        c0,0-21-57,18-67
        s49-4,65,8
        s30,41,53,27
        s66,4,58,32
        s-5,44,18,57
        s22,46,0,45
        s-54-40-68-16
        s-40,88-83,48
        s11-61-11-80
        s-79-7-70-41
        C46.039,146.545,53.039,128.545,66.039,133.545
        z" />
</svg>  
</body>
</html>

上面的代码可以实现动态绘制一条路径的功能。

<path>元素中的路径当然我们可以自己书写,也可以使用工具生成,这里是借用别人的代码。

下面介绍一下它的实现原理:

(1).将stroke-dashoffset设置为路径的长度(1000),那么默认状态下虚线的实线部分就会覆盖整个路径。

(2).再将虚线模式的偏移量也设置为路径的长度, 于是我们只会看到虚线的空缺部分,实线部分就会被隐藏。

(3).最后通过css3动画改编虚线模式的偏移量,就实现了我们想要的效果。

特别说明:stroke-dashoffset属性值可以是普通长度也可以是百分比(参考值是SVG的宽度)。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

返回顶部