SVG 文字路徑動畫

admin發表於2018-09-13
SVG動畫

製作元素的路徑動畫參閱SVG animateMotion 路徑動畫一章節。

製作文字路徑動畫則需要使用<animate>元素，<textPath>元素的startOffset屬性可以設定文字在路徑上的偏移量，具體可以參閱SVG <textPath>文字路徑元素一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px solid blue;
  width:400px;
  height:300px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path id="path"
        d="M20,20 Q50,60 80,140 T340,100"
        stroke="red"
        fill="none" />
  <text>
    <textPath id="textPath" xlink:href="#path">螞蟻部落歡迎您</textPath>
  </text>
  <animate xlink:href="#textPath"
           attributeName="startOffset"
           from="0%" to="100%"
           begin="0s"
           dur="5s"
           repeatCount="indefinite"
           keyTimes="0;1"
           calcMode="spline"
           keySplines="0.1 0.2 .22 1"/>
</svg>          
</body>
</html>

上面的程式碼實現了文字路徑動畫效果，更多內容可以參閱相關閱讀。

（1）.<animate>元素參閱SVG animation 動畫詳解一章節。

（2）.calcModecalcMode, keyTimes參閱calcModecalcMode, keyTimes和keySplines一章節。

相關文章