一种使用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>

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