使用SVG实现的交互式照片高亮效果

Interactive Color Photo Highlight Effect In SVG 选中某个人的照片时，整张图片变成灰度图，被选中的照片呈现高亮的彩色图片效果。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div id="skateclub">
    <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 2074 1382">
        <image width="2074" height="1382" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/team-photo.jpg">
        </image>
        <a id="konni" xlink:href="#">
            <title>Konni</title>
            <path id="konni-mask-path" d="M427.7,450.3c26.5-0.7,33.6,9.4,46,22c-4.3,20.4-6.2,42.5-15,59
c-7.2,13.5-23,12.3-18,34c17.4,7.9,42.2,7.1,50,26c3.9,14.7-10.5,30.1-15,42c-12.5,32.9-31.3,103.1-2,130.1
c-2.7,6.6-5.2,12.6-10,19c-3.7,0.3-7.3,0.7-11,1c0.3,0.7,0.7,1.3,1,2c2,1.7,4,3.3,6,5c-15.8,40.4-35.2,84.1-25,145.1
c2.3,13.9-4.5,23.9-3,32c4.8,26-1.9,55.9-4,77c-0.3,16-0.7,32-1,48c-3.2,11.3-9.1,15.4-17,22c-12.7,10.6,4.9,54.8-31,46
c-12.1-3-36.6-16.2-40-28c-6.1-20.7,14.7-31.1,19-43c-1-7.7-2-15.3-3-23c8.5-43.5,4.2-94.4,12-142.1c4-24.6,9.4-72.3-5-87
c-18.9,0.8-37.8,1.9-50-6c-3.1,4.8-13.4,8.7-18,12c0.6,5.8-19.6,25.7-25,34c-9.1,14.1-10.6,47.5-15,63
c-12.6,44.3-13.8,94.2-26,134.1c-2.7,8.6,2.7,16.6-2,24c-13.8,21.5-49.8,24.4-75,35c-22.7,9.5-51.5,19.8-79,9
c-2.7-12.6-2.1-15.1,4-23c13-4.1,45.3-27.8,50-39c3.1-7.3,0.8-12,4-17c5.3-1.3,10.7-2.7,16-4c3.2-8-0.2-18.3,3-26
c17.7-42.7,23.9-108.3,34-159.1c5.4-27,4.5-52.3,16-73c15.3-27.4,64.8-23.2,90-41c0-0.3,0-0.7,0-1c-1.7-1-3.3-2-5-3
c2-1.3,4-2.7,6-4c-5.8-15.8-0.6-39.9,3-55c1.3-15.7,2.7-31.3,4-47c8.8-36.4,37.9-92.6,79-84c26.1-18,9.4-33.6,14-61
c1.5-9,7.5-14.8,11-21c1-5,2-10,3-15C408,459.7,419.8,456.4,427.7,450.3z" />
        </a>
        <a id="carlo" xlink:href="#">
            <title>Carlo</title>
            <path id="carlo-mask-path" d="M773.5,512.9c29,0.1,53.2,23.2,45,58c-3,12.5-16.2,24.3-9,42c7.2,17.9,31,29.3,41,47
c12.3,21.7,21.8,52,27,78c4.9,24.5,3,40.1,11,60c6.1,15.1,24.7,19.6,30,35c0.3,8.7,0.7,17.3,1,26c2.3,13.3,4.7,26.7,7,40
c0.3,22.7,0.7,45.3,1,68c1.7,11.7,3.3,23.3,5,35c3.1,8.6,9.6,16.2,11,28c1.2,10.5-6.4,21-3,34c21.3-0.7,29.8,4.2,34,25
c-0.3,5-0.7,10-1,15c1.7,4.5,17.4,24.5,22,33c-8.5,19.2-27.1,8.4-43,0c-11.7-6.2-22.3-9.2-36-15c-5.9-2.5-53-45.7-56-52
c6.7-8.8,9.4-18,3-27c-15.4,10.8-32,11.1-54,12c-4,19.1,14.5,29.7,11,49c-3.3,7.3-6.7,14.7-10,22c-2.4,7.4,0.2,16.4-3,25
c-5.5,14.6-30,36.7-50,37c-23-12.7-2.1-51.6-13-76c-5.3-3.3-10.7-6.7-16-10c1.3-1.7,2.7-3.3,4-5c3.3-2.7,6.7-5.3,10-8
c-14.7-57-34.6-99.4-48-158.1c-1.7-20.3-3.3-40.7-5-61c1.1-4.4,5.2-10.8,4-18c-4.3-10-8.7-20-13-30c-3.4-13.4,6.7-21.4,5-31
c-3.7-21.6-16.1-12.9-9-47c1.7-19.3,3.3-38.7,5-58c2.7-5,5.3-10,8-15c5.8-18.1-14.2-41.2,9-48c-1.2-8.6-2.7-10.6,3-15
c10.8-10.9,30.4-12.8,41-24c-11.8-20.3,4.8-43.2,7-62C758,523.3,767.8,517.7,773.5,512.9z" />
        </a>
        <a id="hendrick" xlink:href="#">
            <title>Hendrick</title>
            <path id="hendrick-mask-path" d="M921,555.2c24.7-0.7,32,8.7,44,20c0.3,32.4,5,52.2,17,73c18.6,3,52.2,5.3,64,14
c3,29-18.4,77-25,108c-9,41.9,12.5,49.5,9,78c-17.8-2.6-76.2,5.1-86,1c-12.4-5.1-18.5-21.6-25-33c-15.1-26.7-34.4-54.8-45-84
c-5-13.9-2.5-25.5-7-41c-4.6-15.7-16.1-14.5-16-43c4.3-4.3,8.7-8.7,13-13c7-2,14-4,21-6c1.3-7,2.7-14,4-21c5.4-15.9,16.3-33,17-47 C911,559.2,916,557.2,921,555.2z" />
        </a>
        <a id="heinz" xlink:href="#">
            <title>Heinz</title>
            <path id="heinz-mask-path" d="M1203.7,569.3c5,1.7,10,3.3,15,5c4.3,15,9.1,25.4,9,46c-2.7,0.7-5.3,1.3-8,2
c0.6,16.4,38.8,27,47,48c8.8,22.4-7.8,50.7-11,69s5,30.5,8,41c5.3,18.7-3.1,40.1-8,55c-7.3,1.2-19.1,1.8-25-1c-1-4-2-8-3-12
c4.8-4.1,8.6-7.2,9-16c-4-4-8-8-12-12c-9.8-3.4-16.2,0.6-26,2c0.3-1,0.7-2,1-3c17.5-12.7,59.1-51.9,40-80c-6.3-3-12.7-6-19-9
c-18.7,11.1-33.8,28.5-59,32c-2-6-4-12-6-18c7.5-6.1,9.6-21.6,7-32c-10-7.3-20-14.7-30-22c4-4,8-8,12-12c7.4-14.8,29.3-16.1,33-34 c-7.4-6.8-7.8-19.9-5-33C1183.1,580,1192.5,575.3,1203.7,569.3z" />
        </a>
        <a id="tobsen" xlink:href="#">
            <title>Tobsen</title>
            <path id="tobsen-mask-path" d="M1080.8,569.3c15.5-0.3,20.9,12.8,28.4,20c1,27.7,2.3,37.2-10.7,53.8
c0.7,4.7,1.3,9.3,2,14c24.6,8.1,55.3,19.1,61,46c3.8,18.1-17.5,35.6-3,50c1,0.3,2,0.7,3,1c12.8-17.1,36.4-41.7,64-43
c7.4,3.6,14.8,7.1,18,15c8.7,32.5-38.2,65.3-56,78c1,0.7,2,1.3,3,2c10.9,2.9,28.5-9.2,36-5c2,1.7,4,3.3,6,5
c0.4,39.9-41.3,41.5-76,39c-5,0.3-10,0.7-15,1c-4.3-1.3-6.6-5.9-13-6c-14.9-0.3-24.4,6-37,9c-28.2,6.7-61-14.1-69-32
c-5.5-20.1,4.2-44.5,7-60c0.7-12,1.3-24,2-36c8.8-21.3,17.4-22.7,19-49c-4.3-3.3-8.7-6.7-13-10c0.7,0,1.3,0,2,0
c6.3-6.5,17.8-7.4,21-17c3.5-10.5-3.3-15.7-6-23C1046.1,599.1,1069.5,575.5,1080.8,569.3z" />
        </a>
        <a id="jan" xlink:href="#">
            <title>Jan</title>
            <path id="jan-mask-path" d="M1323.2,569.3c18.2-0.1,20.2,9.5,31,16c0.3,19.3,0.7,38.7,1,58
c15.9,11.3,37.9,17.3,46,36c1,9.3,2,18.7,3,28c3.2,13.6,12.4,30,17,42c2,5.2,0.1,11.4,2,15c24.6,5.1,38.9,1.1,52,27
c-2,18.2-7.2,31.3-11,45c-11.3,40.6-9.2,84.3-32,112c4.2,24.9,10.4,49,3,77c-2,0.3-4,0.7-6,1c-9.3-3.7-14.3-9.8-22-15
c-1,0-2,0-3,0c-7.6,27.7,1.5,64.2-37,64c-9.6-11.7-14.4-26.7-17-46c0.3-5,0.7-10,1-15c-12.9-21.3-17.7-40.6-29-68
c-8.3-14.7-16.7-29.3-25-44c-8.8-18.7-11.5-37.7-19-58c-7.6-20.5-20.2-42.3-15-68c-0.7-12-1.3-24-2-36c-4.6-42.4,6.9-83.6,36-96 c5-0.3,10-0.7,15-1C1316,613.6,1290.1,589.3,1323.2,569.3z" />
        </a>
        <a id="rouven" xlink:href="#">
            <title>Rouven</title>
            <path id="rouven-mask-path" d="M1637,492.8c34.1,1.9,70.3,37,63,74c-8,5.7-16,11.3-24,17c26.7,4,72.8,46.3,81,69
c6.9,19.1,3.9,116.5-1,139.1c-4,18.2-12.7,28.9-19,42c-1,8-2,16-3,24c-3,1-6,2-9,3c-5.3,12-10.7,24-16,36c-2.7,19-5.3,38-8,57
c-5.7,16-11.3,32-17,48c-3,18.7-6,37.3-9,56c-8,19.7-16,39.3-24,59c-2.3,12-4.7,24-7,36c-4,4.3-8,8.7-12,13c-1.3,7-2.7,14-4,21
c-4.3,2.7-8.7,5.3-13,8c-10.3,14.6-5.5,41.9-17,55c-11.7,13.4-38.9,17-45-4c-3.1-10.7,4.4-18.8,6-27c-10.4,5.4-21.5,15.3-36,13
c1-15.3,2-30.7,3-46c-4.7-10-9.3-20-14-30c-1.9-9.8,0.9-20.6-4-27c-6.8,4-9.9,1.6-17-1c1-4.7,2-9.3,3-14c2.3-1.3,4.7-2.7,7-4
c4,1.7,8,3.3,12,5c0-61.3,8.7-105.1,2-166.1c-5.3,1.8-7,5.9-13,4c-1.7-1.7-3.3-3.3-5-5c-1.6-19.5,6.5-15.4,18-12
c-4.4-31,14.8-58.4,21-82c-0.7-6.3-1.3-12.7-2-19c3.7-3.3,7.3-6.7,11-10c0.3-10.7,0.7-21.3,1-32c7.7-29.3,15.3-58.7,23-88
c3.9-18.8,1.3-39.3,8-55c8.7-20.5,40.6-40.2,58-53c-7.7-18.3-14.2-26.4-28-38c1-2,2-4,3-6c-2-2-4-4-6-6c0.7-2.7,1.3-5.3,2-8
c2.7,0,5.3,0,8,0c0.3-0.7,0.7-1.3,1-2c0-1,0-2,0-3c-3.3-2.7-6.7-5.3-10-8c0.3-2,0.7-4,1-6C1612.4,506.8,1624.7,500.4,1637,492.8z" />
        </a>
        <a id="jule" xlink:href="#">
            <title>Jule</title>
            <path id="jule-mask-path" d="M1758.8,498.3c38.2,1.9,47.2,17.5,56,48c3.3,11.2-5.5,13.9,0,23
c3.9,4.6,10.7,3.6,16,7c3.3,4.3,6.7,8.7,10,13c16.5,10.4,42.7,4.5,59,17c28.1,21.5,47.2,104.6,58,145.1c5.4,20.3,12.2,54,6,79
c-3.7,9-7.3,18-11,27c-4,15.5,6.6,26.5,9,38c-0.7,17.3-1.3,34.7-2,52c2.3,3.3,4.7,6.7,7,10c3.1,7.6-1.8,15.5,2,19c2,1.3,4,2.7,6,4
c4.7-4.5,19.7-20.4,26-5c3.8,9.5-7.2,32.5-12,39c-8,2.5-14.1,2-20-2c-1.7,1.7-3.3,3.3-5,5c-11.6,45.5,4.6,117.7-12,160.1
c14.4,0.4,16.9-4.6,24-11c22.3,1.7,15.6,22.6,1,28c0.6,15.4-2.3,26-10,33c-5-3-10-6-15-9c-2.3,0.7-4.7,1.3-7,2
c-4.6,19.8-13.5,46.7-30,55c6.7-17.3,13.3-34.7,20-52c5-82.3,10-164.8,15-247.1c-5.3-19.7-10.7-39.3-16-59c-3.7-3.3-7.3-6.7-11-10
c-0.3-6-0.7-12-1-18c-3.3,2-6.7,4-10,6c0.1,32-1.1,67.5-8,95c-6,19.7-12,39.3-18,59c-3.2,17.1,4.7,28.9,7,43c2,35.7,4,71.3,6,107
c-3.3,3.7-6.7,7.3-10,11c-9.3,28,8.8,63.9-18,74c-16.8,7.4-32.4-14.2-32-29c-21.3,17-5.6,64.4-47,64c-5.3-3.7-10.7-7.3-16-11
c-6.7-32.4,14.7-36.4,20-58c5.6-22.8-15-37.4-12-59c4.9-35.1,3.1-44.9-2-77c-0.7-23-1.3-46-2-69c-6.3-27.3-12.7-54.7-19-82
c-3.5-18.7,7.2-35.4,2-53c-5-16.9-25.4-16.1-30-42c-7.1-39.7,18.7-69,25-100c-0.3-36-0.7-72-1-108c-1.7-7.3-7.4-15.3-5-27
c3-14.2,12.1-25.1,18-37c-13.3-26-19.2-32.3-46-45c0.3-1,0.7-2,1-3c2.3-7.2,9.7-7.4,12-13c-0.3-4.3-0.7-8.7-1-13 C1739.5,509.9,1749.5,505.3,1758.8,498.3z" />
        </a>
        <a id="hans" xlink:href="#">
            <title>Hans</title>
            <path id="hans-mask-path" d="M577.6,466.4c14.8,3.4,29.6,6.7,44.4,10.1
c11.9,7.7,18.5,46.3,11.1,67.6c-2.2,6.2-9.7,13.2-13.1,20.2c12.1,22.4,39.8,33.1,53.4,54.4c13.7,21.5,11.7,125.5-2,147.2
c-9.7,6-19.5,12.1-29.2,18.1c0.3,0.7,0.7,1.3,1,2c7.7,2.7,15.5,5.4,23.2,8.1c0.5,21.2,11.8,41.6,17.1,60.5
c-0.3,10.4-0.7,20.8-1,31.3c3,7.7,6.1,15.5,9.1,23.2c0.7,52.1,1.3,104.2,2,156.3c-3.3,18.9-9.6,34-3,55.5
c3.3,10.7,16.5,14,22.2,24.2c1.9,6.2,0.1,11.4-2,16.1c-27.1,8.5-27.8,7.1-50.4-3c-13.2-5.9-37,0.3-44.4-11.1 c-6.3-9.7,2.8-19.6,0-34.3c-2.4-9.7-4.7-19.5-7.1-29.2c-4.5-25.4,2.5-53.7,6-73.6c3.9-21.9-1.1-43-4-60.5c-2.5-14.8,3.8-29.7,1-42.3
c-5.5-25.4-35.3-69.8-69.6-63.5c-15.3,11.7-7.6,27.6-13.1,50.4c-7.2,29.5-24,66.6-17.1,107.9c2.7,16.1,5.4,32.3,8.1,48.4
c0,24.2,0,48.4,0,72.6c2,6.7,12.2,11.5,10.1,20.2c-5.6,13.2-102.1,40.9-119,31.3c-0.7-1-1.3-2-2-3c4-9.1,9.9-8.6,15.1-15.1
c10-12.3,19-35,22.2-52.4c-3.7-33.3-7.4-66.6-11.1-99.8c-0.3-19.2-0.7-38.3-1-57.5c-10.9-73.4,7.4-131.3,37.3-174.4
c-1.2-16.3-11.3-25.2-14.1-41.3c-5.5-31.7,21.8-126.9,35.3-137.1c11.3-5.7,22.6-8.2,32.3-15.1c6-6.4,12.1-12.8,18.1-19.2
c6.9-4.4,14.1-3,19.2-9.1c-4.8-6.9-8.3-16.9-13.1-24.2c1.3-6.5,1.9-8.3,8.1-10.1C549.1,494.2,568.4,477.6,577.6,466.4z" />
        </a>
        <a id="franz" xlink:href="#">
            <title>Franz</title>
            <path id="franz-mask-path" d="M1491,610.7v-13.8c0,0-4.8-10.7-6.2-17.8c-1.4-7.1-4.1-26.5,0-32s20.7-12.4,27.7-9.7
c6.9,2.8,27.7,20.9,26.3,31.9c-1.4,11-8.3,24.8-8.3,30.4c0,5.5,22.1,15.2,27.7,20.7c5.5,5.5,12.4,26.3,12.4,26.3l-1.5,58.2
l-11.1,42.5l-11.9,45.6l-0.9,28.5l-32.7,1l-29.9,8.3l-7.2-20.7v-13.8c0,0-18.7-26.1-27.9-27.7c-9.1-1.5-11.1-19.4-7-23.5
c4.1-4.1-2.8-35.7-2.1-42c0.7-6.4,11.8-64.5,20.1-72.8C1466.8,621.8,1491,610.7,1491,610.7z" />
        </a>
        <a id="frederich" xlink:href="#">
            <title>Frederich</title>
            <path id="frederich-mask-path" d="M1367.8,601c10.5-8.3,35.4-13.8,40.9,5.5c5.5,19.4-8.3,33.2-8.3,33.2l16.6,19.4c0,0,13.3-4.6,21.4,0
s2,32.2,2,32.2l-2,34.2l0.4,30.7l-0.4,10.6l-15.1-2.5c0,0-11.9-42.2-18.1-53.7c-6.2-11.4-10.3-36.3-10.3-36.3l-12.2-14.9l-27.4-16.2
	c0,0-6.4-17.4,0-27.1C1361.6,606.6,1367.8,601,1367.8,601z" />
        </a>

Interactive Color Photo Highlight Effect In SVG 选中某个人的照片时，整张图片变成灰度图，被选中的照片呈现高亮的彩色图片效果。

编辑器支持Emmet

快捷键

Interactive Color Photo Highlight Effect In SVG 选中某个人的照片时，整张图片变成灰度图，被选中的照片呈现高亮的彩色图片效果。

使用CSS3 SVG和JS实现的交互式火球动画

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字