Как можно использовать svg-анимацию из темы WordPress на своем собственном html-сайте
Вот тема WordPress: https://digitalpro.liquid-themes.com/
Я пытаюсь повторить плавную анимацию контура обрезки изображения.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="912" height="816" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<path fill="white" d="M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z" />
</mask>
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/LwMcO.jpg" width="100%" height="100%"/>
</svg>Но анимация не работает.
Помогите сделать плавную анимацию контура изображения, как в теме Wordpress по ссылке выше.
Свободный перевод вопроса I want to use svg animation from a wordpress theme in my own html site от участника @huseyn ismayilov.
Ответы (1 шт):
Чтобы достичь требуемого эффекта плавного изменения контура обрезки изображения потребуется:
#1. Создать первичный контур обрезки изображения
#2. Использовать этот контур в качестве маски для обрезки изображения
#3. Анимировать атрибут "d" path, который создает контур обрезки
#1. Создать первичный контур обрезки изображения
Для этого необходимо загрузить изображение в векторный редактор и нанести по контуру обрезки узловые точки
С помощью рычагов управления узловыми точками добиться совпадения формы кривой с требуемым контуром обрезки
Сохранить в векторном редакторе файл в формате *.svg и скопировать path в другой файл для анимации
#2. Использовать этот контур в качестве маски для обрезки изображения
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85%" height="85%" viewBox="0 0 912 816" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<path fill="white" d="M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z" />
</mask>
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/LwMcO.jpg" width="100%" height="100%"/>
</svg>#3. Анимировать атрибут "d" path, который создает контур обрезки
Для этого необходимо создать ещё несколько контуров обрезки (path), каждый из которых будет соответствовать новой форме обрезанного изображения.
Написать формулу анимации атрибута "d", где для каждой трансформации формы, будет свой path.
.container {
width:75vw;
height:75vh;
}<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 912 816" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<path fill="white" d="M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z" >
<animate
attributeName="d"
begin="0.5s"
dur="6s"
fill="freeze"
repeatCount="30"
restart="whenNotActive"
values="
M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z;
M86.8 187.7c31.6-80.8 164.4-128.4 225-134.5 77-7.7 319.6 36.4 404.6 95.3 162.6 112.9 61.8 352.5-30.6 434-98.2 86.6-154.8 42-295.8 89.3-122.6 41-191.7 20-254.3-34.3-147.1-127.4-112-288.4-49-449.8Z;
M67.2 355.1c18.2-139.4 295-295.5 390-280 234.3 38.6 288-95.5 372.8-36.6 162.7 112.9-60.3 396.5-152.8 478-98.2 86.6-127.8 203.3-268.9 250.6-122.6 41.1-194.1 13.9-256.7-40.3C4.5 599.3 44.9 527 67.2 355Z;
M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z"
/>
</path>
</mask>
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/LwMcO.jpg" width="100%" height="100%"/>
</svg>
</div>Свободный перевод ответа от участника @Alexandr_TT.