时间戳

首页 > 解决方案 > 一种使用 svg 生成内部径向阴影悬停图像的方法

html - 一种使用 svg 生成内部径向阴影悬停图像的方法

问题描述

我正在寻找一种方法来产生内部径向阴影悬停任何带有 css 和 svg（或其他？）的图像。 这是我想做的一个例子（对于页眉和页脚部分）

你有什么建议吗？我想要一种尽可能跨浏览器的方式。谢谢 ！

标签： htmlcsssvgeffectadobe-illustrator

解决方案

你的意思是这样吗？

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>

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

推荐阅读