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スケーリング及び回転に
はdisplay
、visibility
又はdifferent implicationsとopacity
を介して達成することができます。
パス自体を変更すると、ファイルの内容が変更されたとみなされ、JavaScript経由で変更することができます。したがって、コンテンツのスタイルの分離は依然として維持されます。
この質問は、広すぎる、意見に基づいた、またはディスカッションが必要なので、スタックオーバーフローのトピックではありません。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –
「正しい方法」と尋ねることは、判断の呼び出しであり、存在しません。ここでの答えは、アイコンをどのように処理してそれに応じてスタイルを設定するかを決めることです。フォントをロードしてcssで呼び出す必要があることを除いて、アイコンフォントと同じように動作します。 –