svg path 跟随效果

更新时间：2022-06-28 09:24:44

svg path 路径跟随

<img src="path.jpg">

背景图根据需求设计，重点是设计图和路径相辅相承，考验创意， 实例只是动画效果的其中一种可能；

<text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff">

? 这段用于定义奔跑的图形和颜色，自定义； AI 画路径 存成SVG 复制 

<text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff">? 这段用于定义奔跑的图形和颜色，自定义； AI 画路径 存成SVG 复制 <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1768 1846"  xml:space="preserve">      <text font-family="microsoft yahei" text-shadow="0px 0px 3px #000"   font-size="4rem" x="0" y="0"  fill="#ffffff">?        <animateMotion path="M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9" ; stroke-dashoffset: 0; begin="0s" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>      </text>
<path d="M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9"
    stroke="#f00" opacity="0" stroke-width="1" fill="none"></path>
</svg>

PREVIOUS:
NEXT:
好看的控制台log输出(原创)
ets大数据监控平台模板