[解決済み] CSSでのインラインSVG
2022-03-14 11:34:20
質問
CSSでインラインSVGの定義を使用することは可能ですか?
みたいな意味です。
.my-class {
background-image: <svg>...</svg>;
}
解決方法は?
はい、可能です。これを試してみてください。
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をサポートしている)で動作します。 . Data-URLはIEの古いバージョンでも(制限はありますが)動作しますが、SVGをネイティブにサポートしているわけではありません。
関連
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] CSSのクラスは、1つまたは複数の他のクラスを継承することができますか?
-
[解決済み] svg要素の色を変更するには?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSSアニメーション 途中で止める方法とポーズを維持する方法
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[CSSチュートリアル】CSSで炎のエフェクトを記述する方法
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[解決済み] 背景画像として提供されるSVGイメージの塗りつぶし色を変更するには?