2016-07-13 4 views
-2

私のチームはsvgアイコンに移行しています。
CSSスタイルのクラスでアイコンを定義するために使用し、SVGアイコンを(htmlではなく)ビューコンポーネントレンダリングsvgマークアップとして実装する必要があるかどうかを検討しています。これは、次元、色などを変更することにより、より良い再利用svgを可能にするはずです。一方、これは、スタイリングドメインからアイコンを取り込み、スタイルの変更によってコードが変更されます(CSSの変更だけでなく)。svgアイコンはスタイルレイヤーとビューレイヤーに属していますか?

svgアイコン、コントロールのサイズと色を使用し、スタイルレイヤーとビューレイヤーを保存する正しい方法(あれば)はありますか?

+1

この質問は、広すぎる、意見に基づいた、またはディスカッションが必要なので、スタックオーバーフローのトピックではありません。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –

+0

「正しい方法」と尋ねることは、判断の呼び出しであり、存在しません。ここでの答えは、アイコンをどのように処理してそれに応じてスタイルを設定するかを決めることです。フォントをロードしてcssで呼び出す必要があることを除いて、アイコンフォントと同じように動作します。 –

答えて

1

SVGエディタでは、スタイル情報をインラインで入力することもありますが、通常のCSSと同様に、SVGのスタイル情報も<style>タグ内に含めることができます。

p { 
 
    color: #666; 
 
} 
 

 
.blueTriangle { 
 
    fill: lightblue; 
 
    stroke: #666; 
 
    stroke-width: 8; 
 
}
<p> This is usual text in HTML p tags. </p> 
 
<p> The next thing is embedded SVG, styled by usual CSS: </p> 
 

 
<svg width="250" height="120"> 
 
    <path class="blueTriangle" d="M150 20 L130 90 L170 90 Z" /> 
 
</svg>

SVGは、あなたのDOMにある場合

SVGは、あなたの通常のCSSファイルから直接フォーマットすることができます(これを実行する最も簡単な方法は、あなたのHTMLに直接SVGを書くことです) transformは、異なる構成要素を示す、 can be doneスケーリング及び回転に

displayvisibility又はdifferent implicationsopacityを介して達成することができます。

パス自体を変更すると、ファイルの内容が変更されたとみなされ、JavaScript経由で変更することができます。したがって、コンテンツのスタイルの分離は依然として維持されます。

関連する問題