svg path 跟随效果

插件特效

2026-07-21 13:07 3 次浏览 • 0 次下载 72.3KB

插件描述：svg path 跟随背景图可以根据需求创意设计比如企业发展历程等等

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

svg path 路径跟随

1	`<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>