изображение/SVG изменение цвет?

Question

---

Итак, я что-то развиваю, и я решил использовать SVG. Тем не менее, для моего приложения есть несколько тем, есть ли способ изменить цвет SVG, как белый, на черный, через css? Я не смотрю на фильтрацию, поскольку я не могу применить, так что все изображение похоже на сплошной красный цвет. Например, у меня есть изображение, svg или нет, с белым значком. Но вместо этого мне нужен красный значок. Есть какой-либо способ сделать это? Я предпочитаю не использовать inline svg, так как это усложнит настройку. Если вам требуются разъяснения, пожалуйста, сообщите мне об этом. Заранее спасибо

EDIT: Некоторый дополнительный код:

<img class="fullscreen" src="assets/icons/ic_fullscreen.svg" /> 

EDIT: JSFiddle: http://jsfiddle.net/MashedPotatoes/s2gs3t16/1/

Answer 1

Я на самом деле столкнулся с той же проблемой несколько месяцев назад. В конце концов я написал что-то, что обеспечило мне то, что мы оба ищем, - используйте тот же SVG и измените его цвет. Идея состоит в том, что вы создаете ее через <object>, а затем выполняете некоторые манипуляции с DOM на своем контенте, чтобы заменить его на <div> и таким образом обеспечиваете доступ к контенту.

Я написал небольшую заметку о процессе here - вы можете увидеть решение и взять то, что вам нужно. Кроме того, код является директивой в AngularJS, поэтому он может вас не устраивать, но идея такая же, вы можете взять ее и использовать в Javascript/JQuery.

Если вы используете Угловая:

Вы можете использовать этот компонент - ngReusableSvg.

Answer 2

Спасибо всем за отзыв, но я думаю, что мне придется идти грубым способом ... Встроенные SVG и другие плохие вещи ... Спасибо за помощь.

Answer 3

Вы не можете динамически менять цвета фона SVG. Но в большинстве случаев вы можете это изменить цвет фона контейнера, используя SVG как «маску».

clip-path: url(#clipping)http://codepen.io/yoksel/full/fsdbu/