13
4

3 に答える 3

16

作業フィドルのすぐ内側に二重引用符がurl()あり、すべての SVG コンテンツが単一引用符を使用する方法を確認してください。同じことをする必要があります。そうしないと、パーサーは URL コンテンツがどこで終了するかを認識できません。

または、URL に一重引用符を使用して、SVG コンテンツを同じに保つこともできます。

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }
于 2012-12-06T12:14:25.503 に答える
5

実際の SVG ファイル サイズが大きくなる場合でも、base64 エンコーディングを使用してよりクリーンな形式にすることもできます。css-tricks.com の投稿も参照してください。

すなわち:

background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIy NCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9 Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTEw LjA5IDE1LjU5bDEuNDEgMS40MSA1LTUtNS01LTEuNDEgMS40MSAyLjU4IDIuNTlo LTkuNjd2Mmg5LjY3bC0yLjU4IDIuNTl6bTguOTEtMTIuNTloLTE0Yy0xLjExIDAt MiAuOS0yIDJ2NGgydi00aDE0djE0aC0xNHYtNGgtMnY0YzAgMS4xLjg5IDIgMiAy aDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnoiLz4KPC9zdmc+ Cg==');

この bash コマンド (MacOS X でテスト済み) を使用して、CSS の背景プロパティを簡単に生成できます。

echo "background: url('data:image/svg+xml;base64,"$(openssl base64 < Downloads/material-design-icons-1.0.0/action/svg/ic_exit_to_app_24px.svg)"');"
于 2015-02-04T12:13:11.047 に答える