Как изменить цвет пути к svg-файлу? - PullRequest
Новая
       59

Как изменить цвет пути к svg-файлу?

1 голос
/ 06 августа 2020

Можно ли изменить цвет svg path (не фон!), Если svg загружается из локального файла. 

.status-icon1 {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-color: green;
  mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
  -webkit-mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
}

.status-icon2 {
  width: 48px;
  height: 48px;
  background: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat;
  background-size: cover;
  display: inline-block;
}
<html>

<body>
  <div class="status-icon1"></div>
  <div class="status-icon2"></div>
</body>

</html>

Примечание: позже я хочу ссылаться на файлы svg локально, а не из Интернета.

Ответы [ 3 ]

1 голос
/ 06 августа 2020

Другой способ внедрить SVG в ваш код HTML и изменить его с помощью CSS. Файлы SVG содержат такие атрибуты, как stroke или fill. Вы можете попробовать, сославшись на эти атрибуты с помощью CSS, чтобы изменить его стиль. Также часто используется метод помещения значений в эти атрибуты currentColor. Таким образом, цвет соответствует параметру цвета CSS. Просто изменив стиль оболочки на color: green, вы сможете изменить currentColor внутри вашего SVG. 

.status {
  fill: #ff11ac;
  width: 10rem;
  height: 10rem;
  color: green;
  
  img {
    fill: #ff11ac;
    width: 10rem;
    height: 10rem;
  }
}
<h2>Change fill paremter with CSS</h2>
<div class="status">
  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>

<h2>Change currentColor with CSS</h2>
<div class="status">
  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" fill="currentColor"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>

<h2>IMG "solution" (won't work)</h2>
<div class="status">
  <img 
    src="https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg"/>
</div>

Есть и другие проблемы:

  1. Не следует напрямую ссылаться на файл внутри репозитория. По умолчанию это не разрешено. Поэтому измените https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg на https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg.

  2. Если вы добавляете SVG в качестве маски или фона, вы не сможете изменить его стиль.

  3. Даже вставка файла как атрибута src внутри тега <img/> не сработает.

  4. Изменение width и height SVG, который уже содержит эту информацию (посмотрите код SVG), на самом деле невозможно; не в элегантном.

Решение

Итак, в конце концов, я бы рекомендовал вам просто скопировать код SVG (он не очень длинный), удалить некоторые атрибуты как width и height, но оставьте viewBox и измените размер его оболочки или <svg/> напрямую с некоторыми CSS наборами правил.

И последнее, но не менее важное, измените параметр fill. Вот и все.

0 голосов
/ 06 августа 2020

Если вы используете свой svg как изображение (что, кажется, имеет место здесь), вы не можете повлиять на его содержимое: это отдельный документ. Если вы используете его встроенным, вы можете стилизовать его: просто поместите классы в свой svg и используйте их в своем css. В этом случае, если я правильно понимаю, вы должны sh использовать svg в качестве маски, чтобы показать цвет фона (который тогда был бы цветом заливки псевдо svg). Если это так, вы можете использовать свой встроенный svg и стилизовать его.

0 голосов
/ 06 августа 2020

Существует решение, использующее mask-mode и mask-composite, но на самом деле оно работает только на Firefox.

Идея состоит в том, чтобы использовать luminance (поскольку ваш SVG черный / белый), поэтому мы mask с белой частью, затем мы используем exclude с белым фоном, чтобы инвертировать маску и сохранить черную часть SVG. 

.status-icon1 {
  width: 48px;
  height: 48px;
  display: inline-block;
  border-radius:50%;
  background-color: green;
  mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0wIDdhNyA3IDAgMSAxIDE0IDBBNyA3IDAgMCAxIDAgN3oiLz4KICAgIDxwYXRoIGQ9Ik0xMyA3QTYgNiAwIDEgMCAxIDdhNiA2IDAgMCAwIDEyIDB6IiBmaWxsPSIjRkZGIiBzdHlsZT0iZmlsbDogdmFyKC0tc3ZnLXN0YXR1cy1iZywgI2ZmZik7Ii8+CiAgICA8cGF0aCBkPSJNNi4yNzggNy42OTdMNS4wNDUgNi40NjRhLjI5Ni4yOTYgMCAwIDAtLjQyLS4wMDJsLS42MTMuNjE0YS4yOTguMjk4IDAgMCAwIC4wMDIuNDJsMS45MSAxLjkwOWEuNS41IDAgMCAwIC43MDMuMDA1bC4yNjUtLjI2NUw5Ljk5NyA2LjA0YS4yOTEuMjkxIDAgMCAwLS4wMDktLjQwOGwtLjYxNC0uNjE0YS4yOS4yOSAwIDAgMC0uNDA4LS4wMDlMNi4yNzggNy42OTd6Ii8+CiAgPC9nPgo8L3N2Zz4K) center/contain, 
  linear-gradient(#fff,#fff);
  mask-composite: exclude;
  mask-mode: luminance;
}

.status-icon2 {
  width: 48px;
  height: 48px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0wIDdhNyA3IDAgMSAxIDE0IDBBNyA3IDAgMCAxIDAgN3oiLz4KICAgIDxwYXRoIGQ9Ik0xMyA3QTYgNiAwIDEgMCAxIDdhNiA2IDAgMCAwIDEyIDB6IiBmaWxsPSIjRkZGIiBzdHlsZT0iZmlsbDogdmFyKC0tc3ZnLXN0YXR1cy1iZywgI2ZmZik7Ii8+CiAgICA8cGF0aCBkPSJNNi4yNzggNy42OTdMNS4wNDUgNi40NjRhLjI5Ni4yOTYgMCAwIDAtLjQyLS4wMDJsLS42MTMuNjE0YS4yOTguMjk4IDAgMCAwIC4wMDIuNDJsMS45MSAxLjkwOWEuNS41IDAgMCAwIC43MDMuMDA1bC4yNjUtLjI2NUw5Ljk5NyA2LjA0YS4yOTEuMjkxIDAgMCAwLS4wMDktLjQwOGwtLjYxNC0uNjE0YS4yOS4yOSAwIDAgMC0uNDA4LS4wMDlMNi4yNzggNy42OTd6Ii8+CiAgPC9nPgo8L3N2Zz4K) no-repeat;
  background-size: cover;
  display: inline-block;
}
<div class="status-icon1"></div>
<div class="status-icon2"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...