私はウェブサイトのユーザースタイルを書いています。ユーザーによる設定にはcss変数を使用しています。変数を含むインライン svg を使用して、ユーザーの好みのアクセント カラーに設定されたチェックマークを作成しようとしています。しかし、うまくいかないようです。
提供されたコードでは、var 関数に詰め込みましたが、ストロークの色を currentColor に設定し、要素の色を変数に設定しようとしました。マスクと背景色の設定は機能しますが、「純粋なインライン svg」ソリューションが必要です。
.checkmark {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12">\
<path fill="none" stroke="var(--ColAccent)" stroke-width="3" d="M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1"/>\
</svg>');
}
チェックマークはアクセントカラーにする必要があります。var() を入れるだけで設定すると、機能せず、透過的になります。興味深いことに、currentColor メソッドを使用すると、ストロークは黒になります。