SVGの色指定は、「枠線 stroke」と「内部 fill」の2種類

CSS ＞ CSSトラブル対応

一行で結論

　状態:- 　閲覧数:983 　投稿日:2022-03-19 　更新日:2022-03-19
SVGの色指定
「枠線 stroke」と「内部 fill」の2種類
<style>

svg{

  width:2.0rem;

  height:2.0rem;

}

svg > path{

  fill: orange;

}

</style>


「:first-child」が効かない場合は「:first-of-type」



類似度ページランキング
順位 ページタイトル抜粋 ％
1 SVGの色指定は、「枠線 stroke」と「内部 fill」の2種類 85
2 「Fireworks CS3」は「SVG」 出力不可 43
3 「PhotoShop CS3」　と、「Vieas」　の違い 41
4 「Illustrator」は「SVG」 出力可能 41
5 「Illustrator CS3」で出力範囲指定 38
6 私の「Google Chrome」設定 38
7 SVG線を徐々に描画していくためには、@keyframes を利用 36
8 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 36
9 「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない 35
10 positionプロパティのrelative指定は、デフォルトではない 35
11 角丸の上部分を違う色にしたい／Fireworks 8 33
12 「Create Link」復活 33
13 「秀丸」 VS 「Crescent Eve」 32
14 「Illustrator CS2」「Fireworks 8」「Photoshop CS2」比較 32
15 History Disabler 32
16 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 32
17 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 31
18 Twitter ヘッダー画像は、Fireworks CS3 で作成している 31
19 異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用 31
20 「:first-child」が効かない場合は「:first-of-type」 31
2025/8/09 2:19 更新
週間人気ページランキング ／ 8-2 → 8-8
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 21
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 16
3 鉄道会社毎のカラーコード | カラーコード(色) 15
4 「Google Chrome」のリリースノート（更新履歴）は公開されている | Google Chrome(ブラウザ) 9
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 7
5 RGBの種類 ／ ビットカラー | RGB(色) 7
6 エラー：Google chrome で問題が発生しました。今すぐ再起動しますか？ | Google Chrome(ブラウザ) 6
7 カラーコード ／ 色コード | カラーコード(色) 5
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 5
7 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい | Brave(ブラウザ) 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 5
8 色モデルイメージ図 | 色変換(色) 4
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 4
8 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 4
9 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
9 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
9 HLS ／ HSL ／ HSI ／ HSLA | HLS(色) 3
9 Design 0 3
2025/8/9 1:01 更新