JohnDaniels
@JohnDaniels

Как залить текстурой элемент в svg?

На сайте имеется такая иллюстрация в svg
2c8510b0464843a38bc83294f3fddf9a.png

нужно залить некоторые элементы текстурой, чтобы получилось так
00b77a58f5c143f6b6ce071dcbb9ff42.png

сама текстура в формате png с прозрачным фоном.

я добавил в svg
<pattern id="pattern" patternUnits="userSpaceOnUse" width="200" height="300" viewbox="0 0 200 300">
            <image xlink:href="/images/hover.png" width="200" height="300" />
</pattern>


потом у нужного элемента делаю
fill: url(#pattern);


и естественно теряю цвет фона.

как совместить цвет заливки и текстуру?
  • Вопрос задан
  • 669 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Stepanya
Используйте маску css.yoksel.ru/css-and-svg-masks
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы