CSSのみを使用してsvgの色を変更するにはどうすればよいですか？

私は黒色のアイコンを持っています。色を薄緑色に変更したいのですが。 CSSだけを使用して、次の定義済みスタイル内でどのように行うことができますか？私はあなたがCSSを使用してSVGファイルの色を変更することができるとは思わないCSSのみを使用してsvgの色を変更するにはどうすればよいですか？

.jp-SaveIcon { 
    background-image: url(icons/md/save.svg); 
}

出典

2017-01-27 James Draper

を入力し、SVGの色を変更することが可能ですあなたはそれが座りたいと思う）、あなたは 'fill' CSS属性を使うことができます。あなたのsvgが単色であれば、[Fontastic.me]（http://fontastic.me/）のようなサービスを使ってフォントに変換できます – haxxxton

@haxxxton提案をありがとう！問題は、私の[Jupyter Lab]（https://github.com/jupyterlab/jupyterlab）の私のフォークの暗いテーマで作業していることです。ソースにあまり変更を加えずにこの変更を実装しようとしていました。 –

これを参照してください - > http://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color –

は、その画像ファイルのように、あなたはSVGファイル自体の色を変更する必要があります。

出典

2017-01-27 01:43:52

フィードバックに感謝いたします。だから私はそれが可能なことを知っているsvgの色を変更するCSSを使用して[フィルタのプロパティ]（http://www.w3schools.com/cssref/css3_pr_filter.asp）を使用して私はそれが可能な場合は、 '-webkit-filter：invert（1）;'に変更する代わりに、単一の色を塗りつぶします。 –

これはいかがですか？ -webkit-filterを使いたい場合は、cssでsvgを選択する必要があります。 https://jsfiddle.net/x80vu45x/ –

または単にsvg要素のfillプロパティを設定します。 –

-1

（あなたは、ファイルを開いて、その内容をコピーし、それをどこに貼り付けることによってこれを行うことができ、単にあなたがSVGをHTMLに挿入されている必要があります

svg 
    fill: [color] !imporant

出典

2017-01-27 02:51:13

CSSのみを使用してsvgの色を変更するにはどうすればよいですか？

答えて

関連する問題