Примеры анимации с использованием startOffset
1. Движение цепочки вдоль направляющей
Вместо букв использованы символы юникода, что позволило анимировать несколько объектов сразу, по сравнению с командой анимации animateMotion
, где допустимо анимировать сразу только один объект.
ᴑ
ᴑ - Латинская маленькая буква на боку, что делает её похожей на звено цепи.
-
- И перемычка между звеньями цепи.
Движение цепи туда-обратно реализует анимация изменения startOffset
<svg width="600" height="400" viewBox="100 100 400 300">
<path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>
<text font-size="36" font-family="Times New Roman" fill="grey" >
<textPath id="result" xlink:href="#pathChain">
<tspan dx="0" > ᴑ </tspan> <tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan><tspan dx="-15"> - </tspan><tspan dx="-15"> ᴑ</tspan><tspan dx="-15"> -</tspan><tspan dx="-15"> ᴑ </tspan>
<animate dur="10s" repeatCount="2" attributeName="startOffset" values="1%;55%;1%"/>
</textPath>
</text>
</svg>
2. Анимация кривой Безье с текстом-ссылкой на ней
В этом примере используется анимация атрибута d
path
формула которого, реализует
квадратичную кривую Безье
Наведите курсор на фразу
<style>
svg {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
background-size:cover;
width:50%
height:50%
}
</style>
<svg viewBox="0 0 600 500">
<defs>
<path id="Lsvg" d="M100 200Q200,200 300,200 T500,200" style="stroke:teal;fill-opacity:0.3;stroke-width:3;fill:none">
<animate begin="animLink.mouseover" dur="10s" restart="whenNotActive" attributeName="d"
values="M100 200Q200,200 300,200 T500,200;
M100 200Q200,100 300,200 T500,200;
M100 200Q200,200 300,200 T500,200;
M100 200Q200,300 300,200 T500,200;
M100 200Q200,200 300,200 T500,200"/>
</path>
</defs>
<text text-anchor="middle" font-size="25" fill="#026282">
<textPath id="result" method="align" spacing="auto" startOffset="50%" xlink:href="#Lsvg"><tspan dy="-20">So easy to do with SVG just few lines</tspan></textPath>
<animate begin="animLink.mouseover" dur="10s" repeatCount="1" attributeName="fill"
values="red;green;red;green;red"/>
</text>
<use xlink:href="#Lsvg" transform="translate(0 -10)"/>
<rect id="animLink" x="100" y="150" width="400" height="60" fill="#E0E0E0" fill-opacity="0.01" stroke="none" />
</svg>
3. Анимация текста по кругу
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 400 450">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
<stop stop-color="#406666" offset="0%"/>
<stop stop-color="#fcfcfc" offset="50%"/>
<stop stop-color="#507676" offset="100%"/>
<animate attributeName="x2" begin="start.click" dur="10s" values="0;0.25;0.5;0.75;1" repeatCount="1"/>
</linearGradient>
<path id="path1" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="none"/>
</defs>
<rect x='0' y='0' width='400' height='450' fill='#DDDDDD' stroke='black'/>
<rect x="1" y="1" width="398" height="378"
fill="white" stroke="#507676" stroke-width="1" />
<polygon id="pol1" fill="url(#grad1)" stroke="#507676" stroke-width="1"
points="200,75 308,137.5 308,262.5
200,325 92,262.5 92,137.5" />
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="700" font-size="24">
<textPath id="result" method="align" spacing="auto" startOffset="1%" xlink:href="#path1">
<tspan dy="-10"> Весь очень длинный текст целиком вокруг шестиугольника</tspan>
<animate begin="start.click" dur="10s" repeatCount="1" attributeName="startOffset" values="4%;54%"/>
</textPath>
</text>
<g id="start">
<rect x="285" y="387" rx="10" width="90" height="35" style="fill:#507676;"/>
<text x='300' y='412' fill="white" font-size="25">Старт</text>
</g>
<path id="path2" transform="scale(1.25) translate(-40 -40)" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="#507676" stroke-width="1" stroke-opacity="1"/>
</svg>
4. Ещё один пример анимации startOffset
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 -10 120 120">
<!-- Зелёеая окружность -->
<circle cx="55" cy="55" r="50" style="fill:none;stroke:#92D050;stroke-width:10" />
<!-- Красный сегмент -->
<circle cx="55" cy="55" r="50" stroke="#C0504D" stroke-width="10" stroke-dasharray="78.5 235.5" stroke-dashoffset="117.75" fill="none" />
<!-- Path для текста -->
<path id="top-sector" style="fill:none;stroke:none" d="M 9,50 A 46,46.5 0 0 1 100.5,50" />
<text id="txt1" text-anchor="middle">
<textPath xlink:href="#top-sector" startOffset="50%" style="font-size: 10px; font-weight:700;">Hello World
<!-- Анимация движения текста начинается после щелчка -->
<animate
begin="svg1.click"
dur="4s"
repeatCount="indefinite"
attributeName="startOffset"
values="50%;42%;50%;50%;58%;50%;50%"/>
</textPath>
<!-- Анимация перерисовки текста начинается после щелчка -->
<animate
attributeName="fill"
to="yellow"
begin="svg1.click"
dur="0.2s"
fill="freeze" />
</text>
<text x="46%" y="50%" text-anchor="middle" font-size="14px" fill="dodgerblue"> Click me </text>
</svg>