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

CSS ＞ CSSトラブル対応

一行で結論

　状態:- 　閲覧数:940 　投稿日: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/6/01 4:46 更新
週間人気ページランキング ／ 5-25 → 5-31
順位 ページタイトル抜粋 アクセス数
1 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 11
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
3 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 8
4 鉄道会社毎のカラーコード | カラーコード(色) 7
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
5 RGB ⇔ Lab | 色変換(色) 6
6 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 4
6 キャラクター無料着せ替えジェネレーター Rinmaru Games ／ オンラインサービス | イラスト素材(デザイン) 4
7 効果を打ち消すスタイルシート | CSS 3
7 色モデルイメージ図 | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 ICCプロファイル | カラーマネージメント(色) 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 2
8 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 2
8 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 2
8 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
9 「Sleipnir」という選択肢 1
2025/6/1 1:01 更新