SVG 文本路径动画

2018-3-11 22:45| 发布者: admin| 查看: 896| 评论: 0|来自: 蚂蚁部落

制作元素的路径动画参阅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和keySplines参阅calcModecalcMode, keyTimes和keySplines属性一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部