Stack Overflow на русском Asked on November 27, 2021
Ниже представлен SVG
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 210.2 89.4" style="enable-background:new 0 0 210.2 89.4;" xml:space="preserve" width="214" height="90">
<style type="text/css">
.st0{fill:#009EE2;}
.st1{fill:none;stroke:#009EE2;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="st0" d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z"/>
<path class="st1" d="M4.5,2.9c0,0,63.1,96,179,69.3"/>
</svg>Нужно чтобы стрелка беспрерывно вырисовывалась слева на право.
При решении использована техника совместного применения маски и анимации патча, входящего в маску. Если закрасить этот патч в белый цвет, то маска становится прозрачной в границах этого патча.
Изначально линия изогнутой стрелки не видна, так как ей маскирует маска, но когда маска начинает двигаться вдоль этой линии, то линия становится постепенно видна, так как происходит совмещение прозрачной части маски и линии стрелки.
Обязательным условием является совпадение формул патча маски и маскируемой линии.
<mask id="mask1" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M4.5,2.9c0,0,63.1,96,179,69.3" >
<animate id="an1" attributeName="stroke-dashoffset" begin="0s;an2.end" dur="1s" values="204;0" fill="freeze" />
</path>
</mask>
Для второго участника анимации - наконечника стрелки, применяется та же техника, - открытие скрытых линий с помощью анимации маски.
Ниже полный код
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 210.2 89.4" style="enable-background:new 0 0 210.2 89.4;" xml:space="preserve" width="214" height="90">
<style type="text/css">
#arrow{fill:#00FFFF;}
#curveLine{fill:none;stroke:#00FFE7;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
<mask id="mask1" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M4.5,2.9c0,0,63.1,96,179,69.3" >
<animate id="an1" attributeName="stroke-dashoffset" begin="0s;an2.end" dur="1s" values="204;0" fill="freeze" />
</path>
</mask>
<mask id="mask2" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z" >
<animate id="an2" attributeName="stroke-dashoffset" dur="1s" begin="an1.end" values="204;0" />
</path>
</mask>
</defs>
<rect width="100%" height="100%" fill="#000" />
<path id="curveLine" d="M4.5,2.9c0,0,63.1,96,179,69.3" mask="url(#mask1)"/>
<path id="arrow" d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z" mask="url(#mask2)"/>
</svg>begin="an1.end" - условие запуска анимации наконечника стрелки. Начало её после окончания первой анимации id="an1" рисования линии стрелки.
begin="0s;an2.end" - условие запуска анимации стрелки - первый запуск немедленно, повторный запуск после окончания анимации наконечника стрелки.
Одновременная анимация рисования линии стрелки и движение наконечника стрелки
В этом варианте первая часть анимации - рисование линии стрелки точно такая же как в первом варианте решения.
Вторая часть анимации - движение наконечника реализуется с помощью animateMotion:
<use xlink:href="#arrow" transform="translate(-180 -72)">
<animateMotion id="an2" dur="2s" repeatCount="indefinite">
<mpath xlink:href="#curveLine"/>
</animateMotion>
</use>
mpath - путь вдоль, которого движется наконечник стрелки
Ниже полный код
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 210.2 89.4" style="enable-background:new 0 0 210.2 89.4;" xml:space="preserve" width="214" height="90">
<style type="text/css">
#arrow{fill:#00FFFF;}
#curveLine{fill:none;stroke:#00FFE7;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
<mask id="mask1" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M4.5,2.9c0,0,63.1,96,179,69.3" >
<animate id="an1" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="204;0" repeatCount="indefinite" />
</path>
</mask>
<path id="arrow" fill="none" transform="translate(0 0)" d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z" />
</defs>
<rect width="100%" height="100%" fill="#000" />
<path id="curveLine" d="M4.5,2.9c0,0,63.1,96,179,69.3" mask="url(#mask1)" />
<use xlink:href="#arrow" transform="translate(-180 -72)">
<animateMotion id="an2" dur="2s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#curveLine"/>
</animateMotion>
</use>
</svg>Answered by Alexandr_TT on November 27, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP