Как сделать так, чтобы при анимации движения было видно изменение
цвета в блоке потомке, но при этом не было видно родителя?
Это можно реализовать с помощью применения маски SVG.
В качестве маски будет применяться маленький квадрат class="block"
-- 50px x 50px
, у которого будет закраска fill="white"
и тем самым под этой частью маски будет виден участок родителя class="wrapper"
-- 300px x 100px
, остальная часть родителя будет скрыта той же маской.
С помощью анимации движения маски, пробегаем по всей длине родителя.
Более подробно смотрите в комментариях кода:
body{
background-color: black;
}
.wrapper {
position: relative;
width: 300px;
height: 100px;
fill: url(#grad1);
}
.block {
width: 50px;
height: 50px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100" viewBox="0 0 300 100" >
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF922C" />
<stop offset="100%" style="stop-color:#FF1E5F" />
</linearGradient>
<mask id="msk1" >
<!-- Маска вырезает квадрат 50 х 50px и показывает через отверстие -->
<!-- часть родителя, остальная часть родителя скрыта той же маской -->
<rect class="block" width="50px" height="50px" fill="white" >
<!-- Движение маски от нуля вправо на 250px, затем назад -->
<!-- Повторение цифр обеспечивает паузы в конечных положениях -->
<animate
attributename="x"
dur="6s"
values="0;250;250;0;0"
fill="freeze"
repeatCount="indefinite" />
</rect>
</mask>
</defs>
<!-- Маски применяется к родителю -->
<rect class="wrapper" width="300" height="100" mask="url(#msk1)" />
</svg>
Для наглядности покажем копию родителя
body{
background-color: black;
}
.container {
width: 300px;
height: 100px;
background: linear-gradient(90deg, #FF922C, #FF1E5F);
margin-bottom:10px;
}
.wrapper {
position: relative;
width: 300px;
height: 100px;
fill: url(#grad1);
}
.block {
width: 50px;
height: 50px;
}
<!-- Эта строка реализует для наглядности показ копии родителя -->
<div class="container"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100" viewBox="0 0 300 100" >
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF922C" />
<stop offset="100%" style="stop-color:#FF1E5F" />
</linearGradient>
<mask id="msk1" >
<!-- Маска вырезает квадрат 50 х 50px и показывает через отверстие-->
<!--часть родителя, остальная часть родителя скрыта той же маской -->
<rect class="block" width="50px" height="50px" fill="white" >
<!-- Движение маски от нуля вправо на 250px, затем назад -->
<animate
attributename="x"
dur="6s"
values="0;250;250;0;0"
fill="freeze"
repeatCount="indefinite" />
</rect>
</mask>
</defs>
<!-- Маски применяется к родителю -->
<rect class="wrapper" width="300" height="100" mask="url(#msk1)" />
</svg>
Ещё пример с более сложным, повторяющимся градиентом
body{
background-color: black;
}
.wrapper {
position: relative;
width: 300px;
height: 100px;
fill: url(#grad1);
}
.block {
width: 50px;
height: 50px;
}
<div class="container">
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="210" viewBox="0 0 300 210" >
<defs>
<linearGradient id="grad1"
spreadMethod="repeat"
x1="0" y1="50%" x2="33.5%" y2="50%">
<stop offset="0%" stop-color="crimson"
class="stop-1"/>
<stop offset="49%" stop-color="gold"
class="stop-2"/>
<stop offset="50%" stop-color="lemonchiffon"
class="stop-2"/>
<stop offset="51%" stop-color="gold"
class="stop-2"/>
<stop offset="100%" stop-color="teal"
class="stop-3"/>
</linearGradient>
<mask id="msk1" >
<!-- Маска вырезает квадрат 50 х 50px и показывает через отверстие -->
<!--часть родителя, остальная часть родителя скрыта той же маской -->
<rect class="block" x="0" y="110" width="50px" height="50px" fill="white" >
<!-- Движение маски от нуля вправо на 250px, затем назад -->
<animate
attributename="x"
dur="12s"
values="0;250;250;0;0"
fill="freeze"
repeatCount="indefinite" />
</rect>
</mask>
</defs>
<!-- Образец - копия родителя для наглядности. Эту строку в рабочем приложении нужно будет удалить -->
<rect class="example" x="0" y="0" width="300" height="100" fill="url(#grad1)" />
<!-- Маски применяется к родителю -->
<rect class="wrapper" x="0" y="110" width="300" height="100" mask="url(#msk1)" />
</svg>