用svg生成内径向阴影悬停图像的方法

Question

我正在寻找一种方法来产生一个内部径向阴影悬停任何图像与css和svg（或其他？）。 Here is an example of what i would like to do (for header and footer parts)

你有什么建议吗？我想尽可能多的跨浏览器。谢谢 ！

Answer 1

你的意思是这样的吗？

body{background:black;}
svg{height:100vh; display:block; margin:0 auto;}

<svg viewBox="0 0 300 300">
<defs>
    <radialGradient id="rg" cx=".5" cy=".5" r=".5">
   <stop offset="30%" stop-color="white"></stop>
   <stop offset="100%" stop-color="black"></stop>
  </radialGradient>
  <mask id="mascara">
    <circle cx="150" cy="150" r="100" fill="url(#rg)"></circle>
  </mask>
 </defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" height="240" width="250" style="mask: url(#mascara)"></image>
</svg>

您可能需要检测鼠标的位置并将其用作蒙版的中心。