フォントアイコンをSVGアイコンに置き換える - インラインスタイルを削除する

最近フォントアイコンからSVGアイコンに切り替えることにしました。私は私のSVGsを描画するためにイラストレーターを使用して、私は次の設定で（個別のアイコンを含む）アートボードをエクスポート：フォントアイコンをSVGアイコンに置き換える - インラインスタイルを削除する

スタイリング：インラインスタイル
フォント：SVG
画像：埋め込み
オブジェクトID ：レイヤ名
進：2

私はSVGのアイコンを生成するのにIcomoon appを使用。しかし、問題は、すべてのSVGには、塗りつぶし、ストローク、またはスタイルプロパティがインラインであることです。これらのスタイルがSVGにある間、私はCSSでアイコンの色を更新できません。

何か不足していますか？塗りつぶし/ストローク/スタイルのプロパティを持たないSVGを保存するオプションがIllustratorにありますか？または、プロパティを削除するためにRemove SVG Propertiesのようなものを使用する必要がありますか？

もし、Remove SVG Propertiesが行くなら、誰かが私のAngular CLIプロジェクトでそれを使う方法を教えてもらえますか？私はこれに非常に新しいです。

出典

2017-09-22 user3607282

はい、できます。

はちょうどその適用CSSでSVGを選択：

selector { 
    fill: red; 
    stroke: blue; 
    /* etc */ 
}

私のために正常に動作するようです。

オプションで、必要に応じて!importantを追加します。

インラインCSSを更新するもう1つの方法は、.css()メソッドを使用するjQueryです。その場所から自由なアイコンを使用する

一つの方法は、（link）：

.lnr-home { 
 
    color: red; 
 
    font-size: 40px; 
 
    /* To get crisp results, use sizes that are 
 
    a multiple of 20; because Linearicons was 
 
    designed on a 20 by 20 grid. */ 
 
} 
 

 
body { 
 
    font-size: 40px; 
 
    font-family: sans-serif; 
 
    color: #red; 
 
}

<!-- Add the following <link> to the <head> of your HTML. --> 
 
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> 
 

 
<!-- To insert the icon: --> 
 
<span class="lnr lnr-home"></span> lnr-home 
 

 
<!-- 
 
Cheat Sheet: 
 
https://linearicons.com/free#cheatsheet 
 
-->

出典

2017-09-22 11:17:07 jack

： '<パスフィル= "＃637282" スタイル= "塗りつぶし：VAR（ - カラー1、＃637282）" Dを= "..."> '。 'fill ="＃637282 "style =" fill：var（-color1、＃637282） "を取り除くと、上で追加したスタイルだけが動作します。 – user3607282

インライン値をinspectから更新すると、色が変わりますか？はいの場合は、jQueryから値を更新します。 – jack

私の編集した答えをチェック – jack

あなたは、これが自動的にインラインスタイルに変換されたオンラインツールを使用することができます。使用このAndroidデベロッパー http://inloop.github.io/svg2android/

SVGはこのような何かがある時に動作していないよう

出典

2017-09-22 11:41:50

フォントアイコンをSVGアイコンに置き換える - インラインスタイルを削除する

答えて

関連する問題