Инвертировать svg изображение с помощью css?

Я пытаюсь инвертировать файл изображения с .svg расширение с помощью css. Я знаю .png и .jpg файлы можно инвертировать с помощью css webkit свойства. Я новичок в svg картинки. Можно ли инвертировать .svg изображений с помощью css?

я попытался с помощью 

-webkit-filter:invert(1);
        filter:invert(1);

но это не сработало.

7
css image invert svg

1 ответов

просто стиль SVG элемент непосредственно

svg {
  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
          filter: invert(100%);
}

от IE9 и выше вас можете используйте SVG в <img src="" /> элемент.

img { /* svg on an img tag */
  -webkit-filter: invert(.75); /* safari 6.0 - 9.0 */
          filter: invert(.75);
}
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />

вы можете установить сумму в процентах или как число, как это docs говорит

сумма преобразования, указанная как <number> или a <percentage>. Значение 100% полностью инвертируется, в то время как значение 0% листья входные не менявшийся. Значения между 0% и 100% линейные множители по эффекту. Значение лакуны для интерполяции 0.

22