在剪贴蒙版内悬停时从灰度更改为彩色

Posted 2023-03-23

【中文标题】在剪贴蒙版内悬停时从灰度更改为彩色

【英文标题】：Change from greyscale to color on hover within clipping mask

【发布时间】：2020-12-14 01:29:27

【问题描述】：

我了解如何通过 CSS 和/或 javascript 在悬停时将图像从灰色更改为彩色，但想知道您是否可以使用剪贴蒙版来做同样的事情。

请查看附件图片，显示我想要实现的目标。我见过的其他示例要么转换整个图像，要么转换鼠标指针区域。我希望图像的特定部分或剪切区域在悬停时改变颜色。

group shot showing highlighted colored area

【参考方案1】：

我认为您可以使用 SVG 过滤器 和 CSS。

用矢量工具制作形状并将其转换为base64 对图像应用带有<feColorMatrix> 的滤镜。这可能是模糊、灰度等（有关SVG filters 的更多信息） 设置适当的大小以在背景图像上应用成形滤镜。

这是一个例子：

svg 
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


image 
  filter: grayscale(1);

image:hover 
  filter: url(#blurlayer2);

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
          <filter id="blurlayer2"  >
            <feColorMatrix
    type="matrix"
   values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' />
            <feGaussianBlur  stdDeviation="0" result="blur"/>
            <feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoNCiA8Zz4NCiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPg0KICA8cmVjdCBmaWxsPSJub25lIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNDAyIiB3aWR0aD0iNTgyIiB5PSItMSIgeD0iLTEiLz4NCiA8L2c+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggaWQ9InN2Z18zIiBkPSJtNTEwLDMwMGMtMSwwIC01MDgsLTMgLTUwOCwtM2w1MDgsM3oiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9Im51bGwiIGZpbGw9IiMwMDAiLz4NCiAgPHBhdGggaWQ9InN2Z181IiBkPSJtMTEuOTQ1LDI5Mi40Njc0OWwwLC0yODQuOTk5OTlsMzE0LDI4NC45OTk5OWwtMzE0LDB6IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMDAwIi8+DQogIDxwYXRoIGlkPSJzdmdfNiIgZD0ibTIwMS41NSwxNDIuOTIyNWwxNDUuNDk5OTksLTEzNS41bDE0NS40OTk5OSwxMzUuNWwtMTQ1LjQ5OTk5LDEzNS41bC0xNDUuNDk5OTksLTEzNS41eiIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0ibnVsbCIgZmlsbD0iIzAwMCIvPg0KICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDU0Mi45NDUwMDczMjQyMTg4LDE1MC45Njc0OTg3NzkyOTY4OCkgIiBpZD0ic3ZnXzciIGQ9Im0zODUuOTQ1LDI5My40Njc0OWwwLC0yODQuOTk5OTlsMzE0LDI4NC45OTk5OWwtMzE0LDB6IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMDAwIi8+DQogIDxwYXRoIGlkPSJzdmdfMiIgZD0ibTcwMC4yMzU2NSwyOTIuNDY3NDlsMCwtMjg0Ljk5OTk5bDMxNCwyODQuOTk5OTlsLTMxNCwweiIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0ibnVsbCIgZmlsbD0iIzAwMCIvPg0KIDwvZz4NCjwvc3ZnPg==" x="0%" y="0%"   result="imgmask" preserveAspectRatio="none"/>
            
            <feComposite in2="imgmask" in="blur" in3="rect2" operator="in" result="comp" />
            <feMerge result="merge">
              <feMergeNode in="SourceGraphic" />
              <feMergeNode in="comp" />
            </feMerge> 
          </filter>
        </defs>
 <image  x="0"   xlink:href="https://trucoslondres.com/wp-content/uploads/2017/04/people-1.jpg" />
  </svg>
  

【讨论】：

非常感谢您的回答，转Base64的向量肯定解决了使用向量掩码的问题。我希望从灰度图像开始并在悬停时显示颜色。我了解彩色图像上的灰度滤镜。我假设您将从彩色图像开始，对整个图像应用灰度滤镜，然后在悬停时以某种方式在矢量形状内反转它？