Как изменить цвет одноцветного файла .svg через CSS?

Я использую значок SVG, как показано ниже, и я не хочу использовать шрифт значка (который, как я уже знаю, легче изменить цвет)

<img src="/images/ic_play_arrow_black_24px.svg">

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

По умолчанию эти значки имеют черный цвет, и я хочу изменить его на зеленый.

Как лучше всего сделать это с меньшими усилиями?

URL-адрес файла стрелки https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_play_arrow_black_24px.svg


svg icons css material-design-lite
person Jitendra Vyas    schedule 15.08.2015    source источник
comment
установить цвет в самом svg файле проще всего. Тем более что ничего другого нельзя.   -  person Robert Longson    schedule 15.08.2015
comment
@RobertLongson - Вы хотите отредактировать файл .svg в любом редакторе svg?   -  person Jitendra Vyas    schedule 15.08.2015
comment
На месте, вот что я имею в виду. Или текстовый редактор, в крайнем случае, это всего лишь XML.   -  person Robert Longson    schedule 15.08.2015
comment
@RobertLongson - Хорошо, если нет другого более быстрого решения, я сделаю это. У меня много значков, и мне просто нужно изменить цвет всех их на другой цвет, который я хочу. Я подумал, если бы это было возможно без редактирования, каждый файл сэкономил бы много времени :-)   -  person Jitendra Vyas    schedule 15.08.2015
comment
Не используйте img, вы можете вставить CSS, если используете тег объекта. stackoverflow .com / questions / 4906148 /   -  person Robert Longson    schedule 15.08.2015
comment
если вам нужен сценарий, который преобразует источник svg во встроенную проверку это   -  person maioman    schedule 15.08.2015

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете определить SVG на странице (хотя есть < strong> JS-решения для определений вне страницы) в качестве symbol или defs, а затем используйте..гм, use элемент с классом .... но это может быть больше работы, чем вы хотите.

svg {
  display;
  inline-block;
  width: 24px;
}
.hidden {
  display: none;
}
.red {
  fill: red;
}
.green {
  fill: green;
}
<svg class="hidden" fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="arrow">
      <path d="M8 5v14l11-7z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </g>
  </defs>
</svg>

<svg>
  <use xlink:href="#arrow" class="red" />
</svg>

<svg>
  <use xlink:href="#arrow" class="green" />
</svg>

person Paulie_D    schedule 15.08.2015