3

Моя цель - использовать SVG в повторяющемся background, но мне нужно иметь возможность изменять его цвет заливки в CSS для использования в различных частях веб-сайта.

Насколько я понимаю, если SVG будет загружен как внешний файл (background: url (image.svg)), то тогда я не смогу изменить свойство CSS, например fill. С другой стороны, если SVG будет встроен в HTML (<svg> ... </svg>), то тогда я не смогу использовать / ссылаться на него в свойстве background.

Пожалуйста, поправьте меня, если я ошибаюсь, или у вас есть какое-то другое решение для этого?

Свободный перевод вопроса using SVG from sprite in a background от участника @иkoubin.

1

2 ответа 2

2

Можно маской вырезать фон, благо у css-маски такой же синтаксис как и у background и всякие repeat-ы там прекрасно работают

body{
  margin: 0;
}
div{
  height: 100vh;
  background-color: red;
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUuODY3IiBoZWlnaHQ9IjUzLjIzMyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTUuODY3IDUzLjIzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCgk8cGF0aCBkPSJtNTUuODE4IDIwLjI2Yy0wLjExOC0wLjM2Mi0wLjQzMS0wLjYyNi0wLjgwOC0wLjY4MWwtMTguMDktMi42MjktOC4wOS0xNi4zOTJjLTAuMTY4LTAuMzQyLTAuNTE2LTAuNTU4LTAuODk2LTAuNTU4cy0wLjcyOSAwLjIxNi0wLjg5NiAwLjU1OGwtOC4wOTEgMTYuMzkzLTE4LjA5IDIuNjI5Yy0wLjM3NyAwLjA1NS0wLjY4OSAwLjMxOC0wLjgwOCAwLjY4MS0wLjExNyAwLjM2MS0wLjAyIDAuNzU5IDAuMjUzIDEuMDI0bDEzLjA5MSAxMi43Ni0zLjA5MSAxOC4wMThjLTAuMDY0IDAuMzc1IDAuMDkgMC43NTQgMC4zOTcgMC45NzggMC4zMDkgMC4yMjYgMC43MTggMC4yNTUgMS4wNTMgMC4wNzZsMTYuMTgyLTguNTA2IDE2LjE4IDguNTA2YzAuMTQ2IDAuMDc3IDAuMzA3IDAuMTE1IDAuNDY2IDAuMTE1IDAuMjA3IDAgMC40MTMtMC4wNjQgMC41ODgtMC4xOTEgMC4zMDgtMC4yMjQgMC40NjItMC42MDMgMC4zOTctMC45NzhsLTMuMDktMTguMDE3IDEzLjA5MS0xMi43NjFjMC4yNzItMC4yNjcgMC4zNy0wLjY2NCAwLjI1Mi0xLjAyNXoiLz4NCjwvc3ZnPg0K) round;
  animation: colors 3s linear infinite alternate;
}
@keyframes colors{
  0%{background-color: red;}
  50%{background-color: green;}
  100%{background-color: blue;}
}
<div></div>

А если в блоке какой-то контент, то фон можно сделать псевдой

body{
  margin: 0;
  font-family: sans-serif;
}
.block{
  position: relative;
  font-size: 36px;
  font-weight: bold;
  padding: 1em;  
  -webkit-text-stroke: 1px white;
}
.block__content{
  position: relative;
  z-index: 1;
}
.block:before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUuODY3IiBoZWlnaHQ9IjUzLjIzMyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTUuODY3IDUzLjIzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCgk8cGF0aCBkPSJtNTUuODE4IDIwLjI2Yy0wLjExOC0wLjM2Mi0wLjQzMS0wLjYyNi0wLjgwOC0wLjY4MWwtMTguMDktMi42MjktOC4wOS0xNi4zOTJjLTAuMTY4LTAuMzQyLTAuNTE2LTAuNTU4LTAuODk2LTAuNTU4cy0wLjcyOSAwLjIxNi0wLjg5NiAwLjU1OGwtOC4wOTEgMTYuMzkzLTE4LjA5IDIuNjI5Yy0wLjM3NyAwLjA1NS0wLjY4OSAwLjMxOC0wLjgwOCAwLjY4MS0wLjExNyAwLjM2MS0wLjAyIDAuNzU5IDAuMjUzIDEuMDI0bDEzLjA5MSAxMi43Ni0zLjA5MSAxOC4wMThjLTAuMDY0IDAuMzc1IDAuMDkgMC43NTQgMC4zOTcgMC45NzggMC4zMDkgMC4yMjYgMC43MTggMC4yNTUgMS4wNTMgMC4wNzZsMTYuMTgyLTguNTA2IDE2LjE4IDguNTA2YzAuMTQ2IDAuMDc3IDAuMzA3IDAuMTE1IDAuNDY2IDAuMTE1IDAuMjA3IDAgMC40MTMtMC4wNjQgMC41ODgtMC4xOTEgMC4zMDgtMC4yMjQgMC40NjItMC42MDMgMC4zOTctMC45NzhsLTMuMDktMTguMDE3IDEzLjA5MS0xMi43NjFjMC4yNzItMC4yNjcgMC4zNy0wLjY2NCAwLjI1Mi0xLjAyNXoiLz4NCjwvc3ZnPg0K) round;
  animation: colors 3s linear infinite alternate;
}
@keyframes colors{
  0%{background-color: red;}
  50%{background-color: green;}
  100%{background-color: blue;}
}
<div class="block">
  <div class="block__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quae!</div>
</div>

2

Рассмотрите возможность использования фильтров CSS для изменения окраски svg вместо fill

В приведенном ниже примере файл svg загружается как внешний файл:

background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);

и его цвет будет изменен при наведении с помощью комбинации фильтров CSS.
Получить желаемую комбинацию фильтров для определенного цвета можно с помощью утилиты:

https://codepen.io/sosuke/pen/Pjoqqp

введите сюда описание изображения

Копируем полученную комбинацию фильтров в CSS

Наведите курсор, чтобы изменить цвет иконок:

.android {
display:inline-block;
width:96px;
height:105px;
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
}
.android.blue:hover {
 filter: invert(8%) sepia(99%) saturate(7454%) hue-rotate(248deg) brightness(100%) contrast(143%);
} 

.android.red:hover {
 filter: invert(25%) sepia(100%) saturate(7420%) hue-rotate(6deg) brightness(98%) contrast(122%);
} 

.android.gold:hover {
 filter: invert(40%) sepia(31%) saturate(2475%) hue-rotate(1deg) brightness(106%) contrast(103%);
}
<div class="android blue">
</div>
<div class="android red">
</div>
<div class="android gold">
</div>

Свободный перевод ответа от участника @Alexandr_TT.

3
  • очень интересный вариант, но фильтры необходимо изменить, поскольку .gold таки зеленый, а его глаз больше не видно 16 сен 2021 в 6:33
  • @highpassion изменил фильтры 16 сен 2021 в 16:12
  • 1
    теперь очень хорошо выглядит ) 17 сен 2021 в 6:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.