SVG stroke-dashoffset

admin發表於2018-08-21
SVG
關於如何設定邊框虛線可以參閱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的寬度）。

相關文章