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

CSSCSSトラブル対応

一行で結論

 状態:-  閲覧数:926  投稿日: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」



週間人気ページランキング / 5-4 → 5-10
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 9
2 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 7
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
6 ChromeブックマークURL重複検出が出来ない / 仕様変更に伴いURL重複登録できなくなった | Chromeブックマーク(ブラウザ) 4
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
7 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 3
7 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
7 「bgcolor」「background-color」「background」の違い | CSS 3
8 RGBの種類 / ビットカラー | RGB(色) 2
8 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 2
8 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
8 RGB ⇔ Lab | 色変換(色) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
8 Design 0 2
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
8 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 2
8 Bootstrap v2.3.1 | 2系(Bootstrap) 2
9 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 1
2025/5/11 1:01 更新