Морфинг маски на растровом изображении

Question

Вопрос инициирован топиком: Плавный морфинг одного path в другой path

Один из ответов содержал вот такое преобразование одной формы в другую

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1400" height="1050" viewBox="0 100 1400 1050" preserveAspectRatio="xMinYMin meet" >
<defs>
      <radialGradient id="rg" r=".9">
              <stop offset="0%" stop-color="dodgerblue"></stop>
              <stop offset="10%" stop-color="#000"></stop>
              <stop offset="20%" stop-color="dodgerblue"></stop>
              <stop offset="30%" stop-color="#000"></stop>
              <stop offset="40%" stop-color="dodgerblue"></stop>
              <stop offset="50%" stop-color="#000"></stop>
              <stop offset="60%" stop-color="dodgerblue"></stop>
              <stop offset="70%" stop-color="#000"></stop>
              <stop offset="80%" stop-color="dodgerblue"></stop>
              <stop offset="90%" stop-color="#000"></stop>
              <stop offset="100%" stop-color="dodgerblue"></stop>
            </radialGradient>
    </defs>
  <text x="180" y="180" font-size="24px" fill="dodgerblue">Окройте на весь экран и мышкой бац! </text>
<path  fill="url(#rg)"
   d="m750 525c0 13.8-5.6 26.3-14.6 35.4C726.3 569.4 713.8 575 700 575 686.2 575 673.7 569.4 664.6 560.4 655.6 551.3 650 538.8 650 525c0-13.8 5.6-26.3 14.6-35.4C673.7 480.6 686.2 475 700 475c13.8 0 26.3 5.6 35.4 14.6C744.4 498.7 750 511.2 750 525Z" >
  <animate
    attributeName="d"
 dur="10s"
 begin="svg1.click"
 repeatCount="1"
 values="
 m750 525c0 13.8-5.6 26.3-14.6 35.4C726.3 569.4 713.8 575 700 575 686.2 575 673.7 569.4 664.6 560.4 655.6 551.3 650 538.8 650 525c0-13.8 5.6-26.3 14.6-35.4C673.7 480.6 686.2 475 700 475c13.8 0 26.3 5.6 35.4 14.6C744.4 498.7 750 511.2 750 525Z;
m1275 527.2c-0.7 180.2-409.8-91.8-539.6 33.1-79.8 76.8 77.6 329.8-33.1 330.5C591.3 891.6 745 636.8 664.6 560.4 539.2 441 146.9 700.4 146.1 527.2 145.4 353.9 539.7 609.7 664.6 489.6 742.7 414.6 592.8 166.5 701.1 166.9 809.3 167.3 657.5 414.5 735.4 489.6 865.1 614.8 1275.7 346.9 1275 527.2Z;
m1275 527.2c2.2 179.9-469.8 50.2-537.4 50.9-35.7 0.4 79.8 312.5-35.4 312.7C578 891.1 695.2 580.1 660.2 579.3 487.1 575.2 22.3 704.8 24.9 531.7 28.2 310.6 661.3 525.6 664.6 489.6c8.7-92.4-71.8-323.1 36.5-322.7 108.2 0.4 11.1 321.8 34.2 322.7C835.6 493.7 1272.8 346.9 1275 527.2Z;
m1275 527.2c-0.2 121.5 80.9 279.4-5.7 364.6-134.8 132.5-378-0.2-567-0.9-183.8-0.7-421.1 126-551.5-3.5-85.2-84.6-5.4-240.1-4.6-360.1 0.8-117.1-74.1-268.8 9.1-351.2 129.3-128.1 363.9-7.2 545.9-9.1 189.7-1.9 434-135.1 569.3-2 86.1 84.7 4.8 241.6 4.6 362.4z"
 fill="freeze" /> 
</path>
</svg>

Красиво, но бесполезно. Как всё таки на практике веб строительства можно использовать данный приём?

Появилась идея использовать маски для концепта галереи, где анимация маски с изменяющейся формой будет открывать изображения. Или любые, другие части контента HTML.

<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1000 667" preserveAspectRatio="xMinYMin meet"  >  
 <defs>
  <mask id="msk1">
    <rect width="100%" height="100%" fill="red" stroke-width="1" stroke="white" />
&lt;circle cx="500" cy="300" r="250" fill="#5F5F5F" stroke-width="250" stroke="white"  /&gt;

</mask>
 </defs> 
<image xlink:href="https://i.stack.imgur.com/OWG1v.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>

</div>

Как соединить эти два элемента: и реализовать морфинг маски на растровом изображении при наведении или клике на изображении?

score 4 · Answer 1 · answered Dec 02 '19 at 14:57

Код морфинга берем из вопроса.

Фоновое изображение, которое будет открываться анимированной маской:

<image class="svg-img" 
xlink:href="https://i.stack.imgur.com/mlqrC.jpg"  width="1400" height="1050" mask="url(#msk1)">
</image>

Остальное смотрите в комментариях к коду:

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1400" height="1050" viewBox="0 130 1400 1050" preserveAspectRatio="xMinYMin meet" > 
<defs> 
<mask id="msk1">  
   <!-- Закраска квадрата немного светлее чёрного, из-за этого фон едва виден -->
 <rect width="100%" height="100%" fill="#151515" /> 
   <!-- Закраска белым цветом изменяющихся форм, поэтому становится видна подложка-картинка -->
<g fill="white" transform="translate(0 50)  scale(0.9)">
<path 
   d="m750 525c0 13.8-5.6 26.3-14.6 35.4C726.3 569.4 713.8 575 700 575 686.2 575 673.7 569.4 664.6 560.4 655.6 551.3 650 538.8 650 525c0-13.8 5.6-26.3 14.6-35.4C673.7 480.6 686.2 475 700 475c13.8 0 26.3 5.6 35.4 14.6C744.4 498.7 750 511.2 750 525Z" >
  <!-- Анимация трех `path` каждый из которых отвечает за начальное, промежуточное и финальное положение -->
  <animate
    attributeName="d"
 dur="7s"
 begin="svg1.click"
 repeatCount="1"
 values="
 m750 525c0 13.8-5.6 26.3-14.6 35.4C726.3 569.4 713.8 575 700 575 686.2 575 673.7 569.4 664.6 560.4 655.6 551.3 650 538.8 650 525c0-13.8 5.6-26.3 14.6-35.4C673.7 480.6 686.2 475 700 475c13.8 0 26.3 5.6 35.4 14.6C744.4 498.7 750 511.2 750 525Z;
m1275 527.2c-0.7 180.2-409.8-91.8-539.6 33.1-79.8 76.8 77.6 329.8-33.1 330.5C591.3 891.6 745 636.8 664.6 560.4 539.2 441 146.9 700.4 146.1 527.2 145.4 353.9 539.7 609.7 664.6 489.6 742.7 414.6 592.8 166.5 701.1 166.9 809.3 167.3 657.5 414.5 735.4 489.6 865.1 614.8 1275.7 346.9 1275 527.2Z;
m1275 527.2c2.2 179.9-469.8 50.2-537.4 50.9-35.7 0.4 79.8 312.5-35.4 312.7C578 891.1 695.2 580.1 660.2 579.3 487.1 575.2 22.3 704.8 24.9 531.7 28.2 310.6 661.3 525.6 664.6 489.6c8.7-92.4-71.8-323.1 36.5-322.7 108.2 0.4 11.1 321.8 34.2 322.7C835.6 493.7 1272.8 346.9 1275 527.2Z;
m1275 527.2c-0.2 121.5 80.9 279.4-5.7 364.6-134.8 132.5-378-0.2-567-0.9-183.8-0.7-421.1 126-551.5-3.5-85.2-84.6-5.4-240.1-4.6-360.1 0.8-117.1-74.1-268.8 9.1-351.2 129.3-128.1 363.9-7.2 545.9-9.1 189.7-1.9 434-135.1 569.3-2 86.1 84.7 4.8 241.6 4.6 362.4z"
 fill="freeze" /> 
</path>

</g>
</mask>
</defs>

     <!-- Текст подсказки  -->
   <text x="220" y="220" font-size="24px" fill="dodgerblue">Окройте на весь экран и мышкой бац! </text>
    <!-- Изображение подложка, к которой применена маска -->
 <image class="svg-img" 
xlink:href="https://i.stack.imgur.com/mlqrC.jpg"  width="1400" height="1050" mask="url(#msk1)">
</image>
</svg>

Морфинг маски на растровом изображении

1 Answers1