Ваш код патча SVG выходит за рамки пользовательской области просмотра viewport
, поэтому не видно кривой.
С помощью svg-editor Peter Collingridge проведена оптимизация кода
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="420" height="180" viewBox="-50 540 372 80.4" >
<path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z" style=" stroke:#ded9d5; stroke-width:1; fill:#ded9d5; />
</svg>
Ваш код отрисовывает замкнутый путь, поэтому анимация с помощью атрибута
stroke-dashoffset
будет рисовать кривую по замкнутому пути.
Начало анимации - при наведении курсора на фигуру.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="420" height="180" viewBox="-50 540 372 80.4" >
<path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"
style=" stroke:#4B0082; stroke-width:3; fill:#ded9d5; stroke-dasharray:571; stroke-dashoffset:571;">
<animate id="dash" attributeName="stroke-dashoffset" values="571;0;571" begin="path1.mouseover" restart="whenNotActive" dur="5s" fill="freeze" repeatCount="1"></animate>
</path>
</svg>
begin="path1.mouseover"
- команда на запуск анимации, где path1
идентификатор пути
restart="whenNotActive"
- для предотвращения запуска повторной анимации
values="571;0;571"
- анимация на длине пути от 571px до нуля и обратно
Если я правильно понял автора вопроса нужна анимация не строки пути, а заполнение цветом всей фигуры, образованной path
.
При незамкнутом пути это было бы легко сделать - увеличить толщину строки до нужной величины и использовать анимацию stroke-dashoffset
.
Для решения этих противоречий можно использовать такой прием:
открыть наш код в векторном редакторе и нарисовать дополнительную кривую, которая идет посередине фигуры.
И эту линию будем анимаровать. Для запуска анимации наведите курсор.
<svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="420" height="180" viewBox="-50 550 372 80.4" version="1.1">
<path d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"
style="fill:#F8F3EF;stroke-width:1; stroke:none;" />
<path style="stroke-dasharray:152;stroke-dashoffset:152; fill:none;stroke-width:2;stroke:yellowgreen;"
d="m20.8 535.9c24.9 2.5 55.9-6.4 57.2 15.4 3.5 19.3-1.6 31.7 14 45.2 21.1 17.5 35.4 13 35.4 13">
<animate id="dash" attributeName="stroke-dashoffset" values="152;0" begin="svg2.mouseover" restart="whenNotActive" dur="3s" fill="freeze" repeatCount="1">
</animate>
</path>
</svg>
Далее увеличиваем толщину линии - stroke-width:20;
и получаем необходимый результат:
<svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="420" height="180" viewBox="-50 550 372 80.4" version="1.1">
<path d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"
style="fill:#F8F3EF;stroke-width:1; stroke:none;" />
<path style="stroke-dasharray:152;stroke-dashoffset:152; fill:none;stroke-width:20;stroke:yellowgreen;"
d="m20.8 535.9c24.9 2.5 55.9-6.4 57.2 15.4 3.5 19.3-1.6 31.7 14 45.2 21.1 17.5 35.4 13 35.4 13">
<animate id="dash" attributeName="stroke-dashoffset" values="152;0" begin="svg2.mouseover" restart="whenNotActive" dur="3s" fill="freeze" repeatCount="1">
</animate>
</path>
</svg>
Решение с использованием filter
Идея решения инициирована - SVG Filter tag on hover @Holger Will
Анимация заполнения пути достигается изменением атрибута фильтра dx
- смещение по оси Х-ов.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="420" height="180" viewBox="-50 540 372 80.4">
<defs>
<filter id="violet-fill" x="0%" y="0%">
<feFlood flood-color="#F8F3EF" />
<feOffset dx="0">
<animate id="anim" attributeName="dx" values="0;115;0" dur="5s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
</defs>
<style>
path {
filter: url(#violet-fill);
}
</style>
<path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"
style=" stroke:#4B0082; fill:#F8F3EF;"/>
</svg>
Второй вариант решения с помощью анимации filter
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="420" height="180" viewBox="-50 540 372 80.4">
<defs>
<filter id="violet-fill" x="0%" y="0%">
<feFlood flood-color="#ded9d5" />
<feOffset dx="0">
<animate id="anim" attributeName="dx" values="0;115;0" dur="5s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
</defs>
<style>
path {
filter: url(#violet-fill);
}
</style>
<path id="path1" d="m18.9 529.4c1.1 2.2 1.7 4.6 1.7 7.1 0 2.4-0.6 4.8-1.7 6.9l36.9 0c17.1 0 11.1 14.8 13.5 34.9 7.3 27.3 35.9 38.1 62.6 41.7-1.5-2.4-4.3-7.9-4.3-10.9 0-3.1 0.9-5.7 2.7-8.3-23.3-1.1-29.9-7.3-39.3-22.3-4.8-11.4 5.7-49.2-28.7-49.2z"
style=" stroke-width:1; stroke:violet; fill:#4B0082;"/>
</svg>