Способ получения внутреннего радиального тени при наведении изображения с помощью SVG - PullRequest
Новая
       26

Способ получения внутреннего радиального тени при наведении изображения с помощью SVG

0 голосов
/ 16 сентября 2018

Я ищу способ создания внутренней радиальной тени для наведения любого изображения с помощью css и svg (или другого?). Вот пример того, что я хотел бы сделать (для частей верхнего и нижнего колонтитула)

Есть ли у вас какие-либо предложения? Я бы хотел, чтобы это был самый кросс-браузерный браузер. Спасибо!

1 Ответ

0 голосов
/ 16 сентября 2018

Вы имеете в виду, как это? 

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>

Возможно, вам потребуется определить положение мыши и использовать ее в качестве центра маски.

...