疑似要素で背景画像に指定したSVG画像の色変更

ある要素の::afterの背景画像として、SVG画像を指定しました。

-----
background-image: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31.2"><path d="M28,15.6,2,31.2,17.111,15.6,2,0Z" transform="translate(-2)" fill="white"/></svg>' );
------

この"fill"の部分なのですが、「red」や「white」とすればきちんと表示されますが、「#ffffff」のようなカラーコードにすると表示されません。fillは普通にカラーコード指定できるかと思うのですが、なぜかわかる方いらっしゃいますでしょうか。
ご教授いただけると幸いです。

よろしくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/01/31 14:19

こんにちは

良く知りませんけれど・・・

16進表記の場合、URLエンコードすれば通りませんか？

background-image: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31.2"><path d="M28,15.6,2,31.2,17.111,15.6,2,0Z" transform="translate(-2)" fill="%23ff00dd" /></svg>' );

※ 「#」をエンコードすると「%23」になります。

この回答へのお礼

[#]だけをエンコードすればよかったんですね！
できました！カラーネームでは表現できない色だったのでとても助かりました。

ありがとうございました。

お礼日時：2023/01/31 15:08

No.2 回答者： Ogre7077 回答日時： 2023/01/31 14:24

おそらくは "#" が URL の特殊記号に誤認されて、以降の部分がフラグメントとして処理されています

参考)
https://developer.mozilla.org/ja/docs/Learn/Comm …

データ URL のデータは適切にエスケープするなり base64 化するなりの対策が必要です。
参考)
https://developer.mozilla.org/ja/docs/Web/HTTP/B …
例1) エスケープの場合
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2031.2%22%3E%3Cpath%20d%3D%22M28,15.6,2,31.2,17.111,15.6,2,0Z%22%20transform%3D%22translate(-2)%22%20fill%3D%22%23841%22%2F%3E%3C%2Fsvg%3E
例2) base64 化の場合
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAzMS4yIj48cGF0aCBkPSJNMjgsMTUuNiwyLDMxLjIsMTcuMTExLDE1LjYsMiwwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIpIiBmaWxsPSIjODQxIi8+PC9zdmc+

この回答へのお礼

ありがとうございました！おっしゃる通り、「＃」がひっかかっていたようでした。とても勉強になりました。

お礼日時：2023/01/31 15:09