CSS satır içi SVG tanımını kullanmak mümkün mü?

Gibi bir şey yani

.my-class {
  background-image: <svg>...</svg>;
}

Eğer siz deli kullanmaya çalışıyor gidiyor eğer biraz geç oldu amabir arka plan olarak SVG ınlinekaçmak yukarıdaki önerileri oldukça işe yaramaz. Bir IE çalışmıyor, ve SVG içeriğine tekniğine göre FF gibi diğer tarayıcılarda sorun neden olur.

Sen base64 kodlamak svg (tüm url, svg etiketi ve içeriği! olursa tüm tarayıcılarda çalışır. Burada base64 aynı jsfiddle örnek: http://jsfiddle.net/vPA9z/3/

CSS şimdi bu gibi görünüyor:

body { background-image: 
    url("data:image/svg xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8 PC9zdmc ");

Herhangi bir URL, base64 dönüştürmeden önce kaçan kaldırmayı unutmayın. Yukarıdaki örnekte başka bir deyişle, gösterdi color='#fcc renk dönüştürülen='#fcc, geri gitmelisin #.

Base64 daha iyi çalışır neden tek ve çift tırnak ile tüm sorunları ortadan kaldırır ve url kaçıyor

Eğer JS kullanıyorsanız, pencere kullanabilirsiniz.() btoa base64 senin svg üretmek için; div arka plan ayarlamak için örnek:

var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('myDiv').style.backgroundImage = "url('data:image/svg xml;base64," mySVG64 "')";

JS ile anında SVGs, hatta kendi parametreleri değiştirerek oluşturabilirsiniz.

SVG burada kullanarak daha iyi makaleleri : http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

Bu yardımcı olur umarım

Mike