有什么办法只有一部分的图像悬停着色？ [英] Is there any way to colorize only part of image on hover?

问题描述

我想说的是，我有一个原始的图像，我想让它着色，但是只有部分悬浮（或10×10像素的正方形或图像的圆圈的光标是）。

我应用一些过滤器，使其灰度与CSS，但我不知道

最佳结果的示例图像（保持着色的建议会很好，但不一定）。

>

解决方案

您可以使用 svg 的掩码 过滤器。

CodePen

  var img = document.getElementById（'img'）; img.addEventListener（'mousemove'，function（e）{document.getElementById（'c'）。setAttribute 'cx'，e.clientX  -  img.getBoundingClientRect（）。left）; document.getElementById（'c'）。setAttribute（'cy'，e.clientY  -  img.getBoundingClientRect（）。top）;}）  < svg id =imgwidth =600height =300viewBox =0 0 600 300> < defs> < filter id =ffilterUnits =userSpaceOnUse> < feColorMatrix type =saturatevalues =0/> < / filter> < mask id =mmaskUnits =userSpaceOnUsex =0y =0width =600height =300 < circle id =ccx = -  40cy = -  40r =40fill =white/> < / mask> < / defs> < image filter =url（#f）width =600height =300xlink：href =http://www.lorempixel.com/600/300/> < image mask =url（#m）width =600height =300xlink：href =http://www.lorempixel.com/600/300/>< / svg& / code> 

---

使用 radialGradient 在圆圈边缘上平滑过渡。

CodePen

  var img = document.getElementById（'img'）; img.addEventListener（'mousemove'，function（e）{var x = e.clientX  -  img.getBoundingClientRect （）.left; var y = e.clientY  -  img.getBoundingClientRect（）。top; document.getElementById（'r'）。setAttribute（'fx'，x）; document.getElementById（'r'）。setAttribute fy'，y）; document.getElementById（'r'）。setAttribute（'cx'，x）; document.getElementById（'r'）。setAttribute（'cy'，y）;}）;  

 < svg id =imgwidth =600height =300viewBox =0 0 600 300> < defs> < radialGradient id =rgradientUnits =userSpaceOnUsecx =300cy =150r =400fx =300fy =150 < stop offset =0％stop-color =white/> < stop offset =10％stop-color =white/> < stop offset =12％stop-color =black/> < stop offset =100％stop-color =black/> < / radialGradient> < filter id =ffilterUnits =userSpaceOnUse> < feColorMatrix type =saturatevalues =0/> < / filter> < mask id =mmaskUnits =userSpaceOnUsex =0y =0width =600height =300 < path d =M0,0 h600 v300 h-600zfill =url（#r）/> < / mask> < / defs> < image filter =url（#f）width =600height =300xlink：href =http://www.lorempixel.com/600/300/> < image mask =url（#m）width =600height =300xlink：href =http://www.lorempixel.com/600/300/>< / svg& / code> 

I would love to code simple image painting in HTML, CSS and probably jQuery also.

Let's say I have a original image, and I want make it colorized but only in part of hover (or 10x10px square or circle of image where cursor is).

I applied some filters to make it grayscale with CSS, but I have no idea how to colorize only hover part (not whole picture).

Example image of best result (keeping colorized advice would be great, but not necessarily).

解决方案

You could do this using svg's mask and filter.

CodePen

var img = document.getElementById('img');
img.addEventListener('mousemove', function(e) {
  document.getElementById('c').setAttribute('cx', e.clientX - img.getBoundingClientRect().left);
  document.getElementById('c').setAttribute('cy', e.clientY - img.getBoundingClientRect().top);
})

<svg id="img" width="600" height="300" viewBox="0 0 600 300">
  <defs>
    <filter id="f" filterUnits="userSpaceOnUse">
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="300">
      <circle id="c" cx="-40" cy="-40" r="40" fill="white" />
    </mask>
  </defs>
  <image filter="url(#f)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
  <image mask="url(#m)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
</svg>

---

You could also get a smooth transition on the circle edges by using radialGradient.

CodePen

var img = document.getElementById('img');
img.addEventListener('mousemove', function(e) {
  var x = e.clientX - img.getBoundingClientRect().left;
  var y = e.clientY - img.getBoundingClientRect().top;
  document.getElementById('r').setAttribute('fx', x);
  document.getElementById('r').setAttribute('fy', y);
  document.getElementById('r').setAttribute('cx', x);
  document.getElementById('r').setAttribute('cy', y);
});

<svg id="img" width="600" height="300" viewBox="0 0 600 300">
  <defs>
    <radialGradient id="r" gradientUnits="userSpaceOnUse" cx="300" cy="150" r="400" fx="300" fy="150">
      <stop offset="0%" stop-color="white" />
      <stop offset="10%" stop-color="white" />
      <stop offset="12%" stop-color="black" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
    <filter id="f" filterUnits="userSpaceOnUse">
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="300">
      <path d="M0,0 h600 v300 h-600z" fill="url(#r)" />
    </mask>
  </defs>
  <image filter="url(#f)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
  <image mask="url(#m)" width="600" height="300" xlink:href="http://www.lorempixel.com/600/300" />
</svg>

这篇关于有什么办法只有一部分的图像悬停着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！