目次
CSSの「background」で設定したSVGの色が反映されない。
CSSを使ってSVGファイルを読み込みたい時、「fill」で背景色を設定しても反映されない問題に悩んでいました…。
icon {
background: url('data:image/svg+xml;charset=UTF-8,<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path clip-rule="evenodd" fill-rule="evenodd" d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"></path></svg>') no-repeat left center;
}上記のように、<svg fill=”#fff”….としても、SVGの色は白色になりませんでした。
なぜ、、、
解決方法
16進のカラーコードの前に「%23」と入力するだけで解決できました！
<path fill="%23fff"....
