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

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