如何使用svg滤镜（filter）实现视频渐变色混合特效 - 踏得网

Gradient Map Filters on Video

svg, filter, video

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2552
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<svg>
    <filter id="sepia" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values="0 1 0 0 0
                          0 1 0 0 0
                          0 1 0 0 0
                          0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="colormatrix" />
        <feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
            <feFuncR type="table" tableValues="0.26 0.95" />
            <feFuncG type="table" tableValues="0.19 0.78" />
            <feFuncB type="table" tableValues="0.11 0.59" />
            <feFuncA type="table" tableValues="0 1" />
        </feComponentTransfer>
        <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend" />
    </filter>

<filter id="blackCurrant-and-mint" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values="1 0 0 0 0
                          1 0 0 0 0
                          1 0 0 0 0
                          0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="colormatrix" />
        <feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
            <feFuncR type="table" tableValues="0.75 0.53" />
            <feFuncG type="table" tableValues="0.25 0.97" />
            <feFuncB type="table" tableValues="0.64 0.77" />
            <feFuncA type="table" tableValues="0 1" />
        </feComponentTransfer>
        <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend" />
    </filter>

<filter id="x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values="1 0 0 0 0
                          1 0 0 0 0
                          1 0 0 0 0
                          0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="colormatrix" />
        <feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
            <feFuncR type="table" tableValues="0.98 0.3 0.25" />
            <feFuncG type="table" tableValues="1 0.44 0.24" />
            <feFuncB type="table" tableValues="0.91 0.62 0.39" />
            <feFuncA type="table" tableValues="0 1" />
        </feComponentTransfer>
        <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend" />
    </filter>

<filter id="golden-x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values="
                          0 1 0 0 0
                          0 1 0 0 0
                          0 1 0 0 0
                          0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="colormatrix" />
        <feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
            <feFuncR type="table" tableValues="0.98 1 0.94" />
            <feFuncG type="table" tableValues="1 0.98 0.44" />
            <feFuncB type="table" tableValues="0.91 0.43 0.02" />
            <feFuncA type="table" tableValues="0 1" />
        </feComponentTransfer>
        <feBlend mode="difference" in="componentTransfer" in2="SourceGraphic" result="blend" />
    </filter>
</svg>

<div class="row">
    <video class="video" style="filter: url('#sepia')" src="/uploads/1706/balloons.mp4" autoplay="" loop="" muted="" playsinline="">
    </video>

<video class="video" style="filter: url('#blackCurrant-and-mint')" src="/uploads/1706/balloons.mp4" autoplay="" loop="" muted="" playsinline="">
    </video>
</div>

<div class="row">
    <video class="video" style="filter: url('#x-rays')" src="/uploads/1706/balloons.mp4" autoplay="" loop="" muted="" playsinline="">
    </video>

<video class="video" style="filter: url('#golden-x-rays')" src="/uploads/1706/balloons.mp4" autoplay="" loop="" muted="" playsinline="">
    </video>
</div>