<svg width="500" height="350" viewBox="0 0 500 350">
<path id="myPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>
<text>
<textPath xlink:href="#myPath">
Text laid out along a path.
<animate
attributeName="startOffset"
from="0%"
to="100%"
begin="0s"
dur="5s"
repeatCount="indefinite"
keyTimes="0;1"
calcMode="spline"
keySplines="0.1 0.2 .22 1"
/>
</textPath>
</text>
</svg>
<p>
文字沿着指定路径摆放 <br>
使用 `startOffset` 进行动画
</p>
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
text {
fill: deepPink;
font-size: 2em;
}
p {
color: #aaa;
text-align: center;
margin: 2em 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.