8

Допустим, у меня есть многоцветный градиент, который заполняет экран

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   xmlns:ev="http://www.w3.org/2001/xml-events"
     width="600" height="600" viewBox="0 0 600 600" >  
	 <defs>
	 <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">

        <stop offset="10%" stop-color="#48afc1" />
        <stop offset="10%" stop-color="#b4c63b" />
       <stop offset="20%" stop-color="#ef5b2b" />
       <stop offset="20%" stop-color="#503969" />
        <stop offset="30%" stop-color="#ab6294" />
        <stop offset="30%" stop-color="#1cb98f" />
        <stop offset="40%" stop-color="#48afc1" />
        <stop offset="40%" stop-color="#b4c63b" />
        <stop offset="50%" stop-color="#ef5b2b" />
        <stop offset="50%" stop-color="#503969" />  
        <stop offset="60%" stop-color="#ab6294" />
        <stop offset="60%" stop-color="#1cb98f" />
       <stop offset="70%" stop-color="#48afc1" />
        <stop offset="70%" stop-color="#b4c63b" />
        <stop offset="80%" stop-color="#ef5b2b" />
        <stop offset="80%" stop-color="#503969" />
        <stop offset="90%" stop-color="#ab6294" />
        <stop offset="90%" stop-color="#1cb98f" />
        <stop offset="100%" stop-color="#48afc1" />
	 </linearGradient> 
   </defs> 
   <rect  width="100%" height="100%" fill="url(#grad)" />  
  </svg> 

И изображение:

введите сюда описание изображения

Как реализовать анимацию градиента с помощью маски SVG, чтобы появилось изображение дракончика?
Градиент должен плавно раздвигаться на две половинки, показывая изображение

1 ответ 1

8

Решение реализовано на свойстве SVG масок прорезать объект, к которому применена маска с элементами закраски fill="black"

На первом слое расположены цветные градиентные полосы. Выше этого слоя расположено изображение.

<rect  width="600" height="600"  fill="url(#grad)"  />  
          <image xlink:href="https://i.sstatic.net/fhtOM.jpg" y="-60" mask="url(#msk1)" width="800" height="780" /> 

Если бы к изображению не была бы применена маска mask=”url(#msk1)”, то было бы всегда видно только изображение, так как градиентные полосы расположены под изображением.
Но к изображению применена маска, состоящая из двух прямоугольников, которые имеют fill=”black”, делая тем самым маску полностью прозрачной и показывая тем самым, нижний слой с градиентными полосами. При анимации раздвигания половинок маски, становится видно изображение.

Анимация раздвигания, сдвигания половинок градиента начнется после клика

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   xmlns:ev="http://www.w3.org/2001/xml-events"
     width="400" height="400" viewBox="0 0 600 600">  
	 <defs>
	 <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">

        <stop offset="10%" stop-color="#48afc1" />
        <stop offset="10%" stop-color="#b4c63b" />
       <stop offset="20%" stop-color="#ef5b2b" />
       <stop offset="20%" stop-color="#503969" />
        <stop offset="30%" stop-color="#ab6294" />
        <stop offset="30%" stop-color="#1cb98f" />
        <stop offset="40%" stop-color="#48afc1" />
        <stop offset="40%" stop-color="#b4c63b" />
        <stop offset="50%" stop-color="#ef5b2b" />
        <stop offset="50%" stop-color="#503969" />  
        <stop offset="60%" stop-color="#ab6294" />
        <stop offset="60%" stop-color="#1cb98f" />
       <stop offset="70%" stop-color="#48afc1" />
        <stop offset="70%" stop-color="#b4c63b" />
        <stop offset="80%" stop-color="#ef5b2b" />
        <stop offset="80%" stop-color="#503969" />
        <stop offset="90%" stop-color="#ab6294" />
        <stop offset="90%" stop-color="#1cb98f" />
        <stop offset="100%" stop-color="#48afc1" />
	 </linearGradient>
	    <!-- Маска -->
	 <mask id="msk1" > 
	       <rect  width="100%" height="100%"  fill="white" /> 
          <!-- Анимация левой половины маски   -->
	  <rect x="0" y="0" width="300" height="600" fill="black" >
           <!-- Анимация правой половины маски   -->	     
		 <animate attributeName="x" begin="svg1.click" dur="10s" values="0;-300;-300;0;0" fill="freeze" repeatCount="3" />
	   </rect> 
	     <rect x="300" y="0" width="300" height="600" fill="black" >
	      <animate attributeName="x" begin="svg1.click" dur="10s" values="300;600;600;300;300" fill="freeze" repeatCount="3" />
	   </rect>
	 </mask>
     </defs>
	  <rect  width="600" height="600"  fill="url(#grad)"  />  
	      <image xlink:href="https://i.sstatic.net/fhtOM.jpg" y="-60" mask="url(#msk1)" width="800" height="780" /> 

</svg>

Пример с радиальными градиентными полосами

В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.

<!-- Маска -->
     <mask id="msk1" > 
        <rect  width="100%" height="100%"  fill="black" /> 
          <circle cx="300" cy="300"  r="0" fill="white" >
            <!-- Анимация маски прорезающей изображение и показывающей радиальный градиент             -->
           <animate attributeName="r" begin="svg1.click" dur="8s" values="0;300;300;0;0"
             fill="freeze" repeatCount="3" />
        </circle>
     </mask>

Анимация раздвигания радиального градиента начнется после клика

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="300" height="300" viewBox="0 0 600 600" >  
	 <defs>
	     <!-- Многоцветный радиальный градиент -->
	 <radialGradient id="grad" x1="0" y1="0" x2="100%" y2="0">

        <stop offset="10%" stop-color="#48afc1" />
        <stop offset="10%" stop-color="#b4c63b" />
       <stop offset="20%" stop-color="#ef5b2b" />
       <stop offset="20%" stop-color="#503969" />
        <stop offset="30%" stop-color="#ab6294" />
        <stop offset="30%" stop-color="#1cb98f" />
        <stop offset="40%" stop-color="#48afc1" />
        <stop offset="40%" stop-color="#b4c63b" />
        <stop offset="50%" stop-color="#ef5b2b" />
        <stop offset="50%" stop-color="#503969" />  
        <stop offset="60%" stop-color="#ab6294" />
        <stop offset="60%" stop-color="#1cb98f" />
       <stop offset="70%" stop-color="#48afc1" />
        <stop offset="70%" stop-color="#b4c63b" />
        <stop offset="80%" stop-color="#ef5b2b" />
        <stop offset="80%" stop-color="#503969" />
        <stop offset="90%" stop-color="#ab6294" />
        <stop offset="90%" stop-color="#1cb98f" />
        <stop offset="100%" stop-color="#48afc1" />
	 </radialGradient>
	     <!-- Маска -->
	 <mask id="msk1" > 
	        <rect  width="100%" height="100%"  fill="black" /> 
			 
	   <circle cx="300" cy="300"  r="0" fill="white" >
            <!-- Анимация маски прорезающей изображение дракончика и показывающее радиальный градиент  -->
		 <animate attributeName="r" begin="svg1.click" dur="8s" values="0;300;300;0;0" fill="freeze" repeatCount="3" />
	    </circle>
	 </mask>
     </defs> 
	           <!-- Фоновое изображение радиальный градиент	  -->
	  <circle  cx="300" cy="300"  r="300"  fill="url(#grad)"  />  
                 
		  <image xlink:href="https://i.sstatic.net/6kywq.png" x="-140" y="-60" mask="url(#msk1)" width="800" height="780" />  

</svg>

Третий пример

Используется два изображения: девушки и рассерженного льва

Этот пример аналогичен второму примеру.
На нижнем слое фоновое изображение льва.
На верхнем слое изображение девушки, к которому применена маска.

    <!-- Фоновое изображение льва, которое становится видно, через отверстие прорезанное маской -->
    <image id="img2" xlink:href="https://i.sstatic.net/T5UFF.jpg" opacity="1" x="-60" y="-40" width="160%" height="160%" >

    </image>
            <!-- К изображению девушки применена маска -->
<image id="img1" xlink:href="https://i.sstatic.net/73YNh.jpg"  width="100%" height="100%"
       pointer-events="fill" mask="url(#msk1)" />

Анимация маски достигается изменением rx эллипса.

<ellipse cx="300" cy="265" rx="0" ry="240"  >
           <animate id="open" attributeName="rx" dur="3s" begin="idefinite" 
               values="0;50;0;50;0;100;80;185" fill="freeze" /> 
             <animate id="close" attributeName="rx" dur="3s" begin="idefinite" 
                  values="185;0" fill="freeze" />
</ellipse> 

Анимация раскрытия изображения льва начинается после клика, закрытие изображения после повторного клика

var lion_svg1 = document.getElementById("svg1"),
  close = document.getElementById('close'),
  open = document.getElementById("open");

let flag = true;

lion_svg1.addEventListener('click', function() {
  if (flag == true) {
    open.beginElement();
    flag = false;
  } else {
    close.beginElement();
    flag = true;
  }
});
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="400"   viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >  
 <defs>
  <mask id="msk1">
      <!-- Ко всему изображению применён белый цвет маски, поэтому всё пространство вне элипса становится видимым -->
     <rect width="100%" height="100%" fill="white" />   
      <!-- К эллипсу применен чёрный цвет маски, поэтому на этом участке изображение вырезается --> 
    	<!--  и становится видным другое, нижнее изображение   -->
  <g fill="black" >
    	 <ellipse cx="300" cy="265" rx="0" ry="240"  >
		   <animate id="open" attributeName="rx" dur="3s" begin="idefinite" values="0;50;0;50;0;100;80;185" fill="freeze" /> 
		     <animate id="close" attributeName="rx" dur="3s" begin="idefinite" values="185;0" fill="freeze" />
		 </ellipse> 
 </g>  
 </mask>
	</defs>  
	
	    <!-- Фоновое изображение льва, которое видно, через отверстие прорезанное маской -->
	<image id="img2" xlink:href="https://i.sstatic.net/T5UFF.jpg" opacity="1" x="-60" y="-40" width="160%" height="160%" >
	   
	</image>
            <!-- К изображению девушки применена маска -->
<image id="img1" xlink:href="https://i.sstatic.net/73YNh.jpg"  width="100%" height="100%"
       pointer-events="fill" mask="url(#msk1)" />
</svg>	 

Четвёртый пример

Анимация прозрачности маски

Как и в третьем примере два изображения: нижнее, в качестве фона льва к верхнему изображению девушки применена маска в форме овала

Анимация маски достигается за счет анимации прозрачности овала.

var lion_svg1 = document.getElementById("svg1"),
  close = document.getElementById('close'),
  open = document.getElementById("open");

let flag = true;

lion_svg1.addEventListener('click', function() {
  if (flag == true) {
    open.beginElement();
    flag = false;
  } else {
    close.beginElement();
    flag = true;
  }
});
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="400"   viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >  
 <defs>
  <mask id="msk1">
      <!-- Ко всему изображению применён белый цвет маски, поэтому всё пространство вне элипса становится видимым -->
     <rect width="100%" height="100%" fill="white" />   
      <!-- К эллипсу применен чёрный цвет маски, поэтому на этом участке изображение вырезается --> 
    	<!--  и становится видным другое, нижнее изображение льва   -->
  <g fill="black" > 
             <!-- Анимация прозрачности маски -->
    	 <ellipse cx="300" cy="265" rx="185" ry="240" opacity="0"  >
		   <animate id="open" attributeName="opacity" dur="3s" begin="idefinite" values="0;1" fill="freeze" /> 
		     <animate id="close" attributeName="opacity" dur="3s" begin="idefinite" values="1;0" fill="freeze" />
		 </ellipse> 
 </g>  
 </mask>
	</defs>  
	
	

	    <!-- Фоновое изображение льва, которое видно, через отверстие прорезанное маской -->
	<image id="img2" xlink:href="https://i.sstatic.net/T5UFF.jpg" opacity="1" x="-60" y="-40" width="160%" height="160%" >
	   
	</image>
            <!-- К изображению девушки применена маска -->
<image id="img1" xlink:href="https://i.sstatic.net/73YNh.jpg"  width="100%" height="100%"
       pointer-events="fill" mask="url(#msk1)" />
</svg>	 

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.