Основная проблема в создании цветной тени изображения, как мне кажется, состоит в том, что если применять напрямую SVG, CSS фильтры, box-shadow
, то получится тень не вокруг фигуры, а вокруг прямоугольника, ограничивающего изображение.
Поэтому решение:
- Нарисовать контур фигуры в векторном редакторе
- Использовать этот контур в качестве маски для вырезания фигуры из прямоугольного изображения.
- Повторно использовать контур, к которому будет применен SVG фильтр для создания цветной тени.
Смотрите комментарии в коде, надеюсь они помогут понять основные моменты реализации решения
Вот начинка, что находится под капотом: контур изображения с примененным фильтром для тени
#shadowCopy {
fill:black;
}
.shadowCopy:hover {
filter:url(#shadow);
}
.img {
pointer-events:none;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="600" viewBox="0 0 900 600" style="border:1px solid gray;" >
<defs>
<!-- Маска вырезает из прямоугольной картинки контур изображения -->
<mask id="msk1">
<path d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z" style="fill:white;stroke:#000"/>
</mask>
<!-- Фильтр обеспечивает цветную тень -->
<filter id="shadow" x="-20%" y="-20%" width="200%" height="200%" >
<feDropShadow dx="0" dy="10" stdDeviation="35" flood-color="#52BCFD" />
</filter>
</defs>
<!-- Фон -->
<rect width="100%" height="100%" fill="#E8EAE9" />
<!-- Копия контура картинки, к которой применен цветной фильтр тени -->
<path class="shadowCopy" stroke="dodgerblue" stroke-width="3" d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z" />
</svg>
Сверху добавляем изображение
<!-- Растровое изображение, к которому применена маска -->
<image class="img" xlink:href="6013176005.jpg" mask="url(#msk1)" width="100%" height="100%" />
Ниже полный код:
<style>
#shadowCopy {
fill:black;
}
.shadowCopy:hover {
filter:url(#shadow);
}
.img {
pointer-events:none;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="600" viewBox="0 0 900 600" style="border:1px solid gray;" >
<defs>
<!-- Маска вырезает из прямоугольной картинки контур изображения -->
<mask id="msk1">
<path d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z" style="fill:white;stroke:#000"/>
</mask>
<!-- Фильтр обеспечивает цветную тень -->
<filter id="shadow" x="-20%" y="-20%" width="200%" height="200%" >
<feDropShadow dx="0" dy="10" stdDeviation="35" flood-color="#52BCFD" />
</filter>
</defs>
<!-- Фон -->
<rect width="100%" height="100%" fill="#E8EAE9" />
<!-- Копия контура картинки, к которой применен цветной фильтр тени -->
<path class="shadowCopy" d="M233.6 210.2 237.5 189 606.1 150l53.5 178.4-6.7 18.4-379.7 45.7z" />
<!-- Растровое изображение, к которому применена маска -->
<image class="img" xlink:href="https://i.stack.imgur.com/BmOyx.jpg" mask="url(#msk1)" width="100%" height="100%" />
</svg>