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

CSS ＞ CSSトラブル対応

一行で結論

　状態:- 　閲覧数:782 　投稿日: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
2024/11/23 1:19 更新
週間人気ページランキング ／ 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 10
3 Design 0 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
5 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 4
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
7 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ Lab | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 色モデルイメージ図 | 色変換(色) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 ICCプロファイル | カラーマネージメント(色) 2
8 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2024/11/23 1:01 更新