Как выбрать цвет заливки для изображения SVG с помощью CSS?(Не встроенный svg) - PullRequest
Новая
       37

Как выбрать цвет заливки для изображения SVG с помощью CSS?(Не встроенный svg)

0 голосов
/ 29 мая 2018

Как выбрать цвет "заливка" для изображения svg с использованием css? У меня есть следующий тег img: 

<img src="assets/images/folder.svg" class="svg" >

My .svgфайл блокируется так: 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 25 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(1,0,0,1,-87.34,-350.89)">
        <g transform="matrix(1,0,0,0.947605,-375.66,-124.574)">
            <g id="Mail-Icon" serif:id="Mail Icon" transform="matrix(1,0,0,1.05529,-47.0001,-2366.53)">
                <path d="M532.5,2737L511.5,2737C510.672,2737 510,2736.33 510,2735.5L510,2719.5C510,2718.67 510.672,2718 511.5,2718L518.065,2718L518.065,2720L532.5,2720C533.329,2720 534,2720.67 534,2721.5L534,2735.5C534,2736.33 533.329,2737 532.5,2737ZM531,2724L531,2722.43L513,2722.44L513,2724L531,2724Z" style="fill:rgb(131,147,167);"/>
            </g>
        </g>
    </g>
</svg>

Я пробовал это, но это не работает: 

.svg {
    fill:rgb(18, 136, 222);
}

Я видел решения, где вы добавляете код SVG в ваш HTML.Хотя я ищу решение, в котором добавление svg inline не требуется.

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Ответ на аналогичный вопрос здесь: img src SVG изменяет цвет заливки

Поскольку вы не можете изменить внешний ресурс с помощью файла CSS, а при использовании тега <img> внешний файл импортируетсяРесурс, вы не можете достичь того, чего хотите, не помещая содержимое .svg на свою страницу .html.

Другой вариант - это непосредственное изменение кода svg путем добавления fill="rgb(18, 136, 222);" в качестве атрибута тега <path>: 

<path fill="red" d="M532.5 …
0 голосов
/ 29 мая 2018

Проблема с <img> и background-image заключается в том, что вы не можете управлять внутренностями SVG с помощью CSS, как при использовании SVG как inline или при использовании SVG как <object>.

svg path {
  fill: red;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><title>Untitled-1</title><g id="Mail-Icon"><path d="M552,467.87H48a36,36,0,0,1-36-36v-384a36,36,0,0,1,36-36H205.56v48H552a36,36,0,0,1,36,36v336A36,36,0,0,1,552,467.87Zm-36-312V118.19l-432,.24v37.44Z"/></g></svg>

Вы можете узнать больше об этом здесь

...