Как добавить тень к изображению, замаскированному пользовательской формой SVG? - PullRequest
Новая
       101

Как добавить тень к изображению, замаскированному пользовательской формой SVG?

1 голос
/ 20 июня 2020

Я пробовал несколько различных подходов, включая использование фонового изображения; игра с фильтром, который работал бы отлично, если бы было разрешено только ключевое слово inset; и пытается наложить на слой второй пользовательский SVG, который был только тенью.

Есть другие идеи?

HTML

<div className="Hero-image masked-image">
   <img
      src={MainStreet}
   />
</div>

CSS

.masked-image {
   mask-image: url(../images/blob.svg);
}

Hero-image {
   box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.9);

   img {
      position: relative;
      z-index: -2;
   }
}

Hero image, masked with custom SVG shape

xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="926px" height="687px">
...