Одним из решений будет использование изображения SVG c применением фильтра feComponentTransfer
с красным каналом feFuncR
. Например, так:
Анимация применение фильтра начнётся после клика на изображении
svg.addEventListener("click",() =>{
_animate.beginElement();
})
<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" >
<filter id="duotone">
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone_red">
<feFuncR type="table" tableValues="0 1">
<animate
id="_animate"
attributeName="tableValues"
dur="4s"
values="0 1;1 0;1 0;0 1"
fill="freeze"
begin="svg.mouseover"
/>
</feFuncR>
</feComponentTransfer>
</filter>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image>
</svg>
Анимация зелёного канала feFuncG
:
svg.addEventListener("click",() =>{
_animate.beginElement();
})
<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" >
<filter id="duotone">
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone_green">
<feFuncG type="table" tableValues="0 1">
<animate
id="_animate"
attributeName="tableValues"
dur="3s"
values="0 1;1 0;1 0;0 1"
fill="freeze"
begin="svg.mouseover"
/>
</feFuncG>
</feComponentTransfer>
</filter>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image>
</svg>
Анимация синего канала feFuncВ
:
svg.addEventListener("click",() =>{
_animate.beginElement();
})
<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" >
<filter id="duotone">
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone_blue">
<feFuncB type="table" tableValues="0 1">
<animate
id="_animate"
attributeName="tableValues"
dur="3s"
values="0 1;1 0;1 0;0 1"
fill="freeze"
begin="svg.mouseover"
/>
</feFuncB>
</feComponentTransfer>
</filter>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image>
</svg>
Анимация альфа канала (прозрачности):
svg.addEventListener("click",() =>{
_animate.beginElement();
})
<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="300" height="300" >
<filter id="duotone">
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone_A">
<feFuncA type="table" tableValues="0 2">
<animate
id="_animate"
attributeName="tableValues"
dur="2s"
values="0 1;1 0.1"
fill="freeze"
begin="svg.click"
/>
</feFuncA>
</feComponentTransfer>
</filter>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" width="300" height="300" filter="url(#duotone)"></image>
</svg>
Примечание переводчика:
feComponentTransfer
один из самых мощных примитивов фильтра SVG. Он
дает нам контроль над отдельными каналами RGBA нашего источника
графики, позволяя создавать в SVG эффекты, подобные Photoshop.
Более подробно здесь
В следующем примере для красного канала будет применён набор атрибутов type="linear"
slope="1"
intercept="0"
.
При наведении курсора будет анимирован атрибут slope
values="1;4"
:
И лето плавно заменится осенью.
<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="400" height="300" >
<filter id="duotone">
<fecomponenttransfer>
<fefuncR type="linear" slope="1" intercept="0" >
<animate
id="_animate"
attributeName="slope"
dur="3s"
values="1;4;4;1"
fill="freeze"
begin="svg.mouseover"
/>
<fefuncG type="linear" slope="1" intercept="0" />
<fefuncB type="linear" slope="1" intercept="0" />
</fecomponenttransfer>
</filter>
<image xlink:href="https://i.stack.imgur.com/PwDWY.jpg" width="100%" height="100%" filter="url(#duotone)"></image>
</svg>