Решение реализовано на свойстве 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>