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

CSS ＞ CSSトラブル対応

一行で結論

　状態:- 　閲覧数:1,360 　投稿日: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
2026/6/09 0:02 更新
週間人気ページランキング ／ 6-1 → 6-7
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
1 「属性」「プロパティ」「アトリビュート」の違い | CSS 5
2 RGBの種類 ／ ビットカラー | RGB(色) 4
3 HSLとHSVの違い | 色変換(色) 2
3 画像縦横比の問題 | 画像 2
3  全体基準となるhtmlタグへのfont-size指定案 2
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
3 SeaMonkey 2.7.2 2
3 RGB ／ 24ビットカラー 2
3 鉄道会社毎のカラーコード | カラーコード(色) 2
3 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2
3 RGB ⇔ Lab | 色変換(色) 2
3 縦横比が16:9となる整数値の組み合わせ 2
4 画面キャプチャ 2017 年 | Chrome 拡張機能 1
4 メニュー他サイト調査 | メニュー(UI) 1
4 RGB → HSL 変換式 ／ 最大値基準 1
4 RGB → HSL 最大値基準 ／ RGB 33, 150, 243 → HSL 206.6°, 89.7％, 54.1％さ 1
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 1
4 方式2.色相H0～1 ／ CSS Color Module Level 3 1
4 CopyTabTitleUrl(Chrome 拡張機能) カテゴリー 1
2026/6/8 5:05 更新