CSS クラスを使用して、SVG URL を Web ページに読み込みます。これは、Firefox 35.0.1 (およびおそらく Firefox の以前のバージョン) を除く、テストしたすべてのブラウザーで機能します。ストロークに実際の色名 (たとえば、白) を使用すると期待どおりに機能しますが、16 進値 (たとえば、#ffffff) を使用すると、ストロークがまったく表示されないことに気付きました。MDN によると、16進数値がサポートされています。
つまり、これはうまく動作します:
.ui-stroke-icon .ui-icon-head:after,
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="white" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg>
しかし、これは当てはまりません:
.ui-stroke-icon .ui-icon-head:after,
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="#ffffff" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg>
ここで色に 16 進数値を使用する方法はありますか? これは、Sass をできるだけドライに保つのに役立ちます。
ベストアンサー1
文字#はURLで予約されているフラグメント識別子の開始として。URL を有効にするには、これを %23 としてエンコードする必要があります。これは Firefox のバグではありません。
あるいは、base64 を使用して文字列全体をエンコードすることもできます。