CSS でインライン SVG 定義を使用することは可能ですか?
つまり、次のようなことです:
.my-class {
background-image: <svg>...</svg>;
}
ベストアンサー1
はい、可能です。これを試してください:
body {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
}(これを機能させるには、SVG コンテンツを URL エスケープする必要があることに注意してください。たとえば、#は に置き換えられます%23。)
これはIE 9（SVGをサポート）で動作します。データ URL は IE の古いバージョンでも動作しますが (制限あり)、SVG はネイティブにサポートされていません。