1
Basit bir SVG görüntüsünü satır içi arka plan olarak eklemeye çalışıyorum, ancak bilinmeyen bir nedenle IE ve Firefox'ta başarısız oluyor.Arka plan SVG resmi satır içi görüntülenmiyor
Verileri base64 olarak kodlarsam, çalışır, ancak çok daha çirkin olur, sözdizimi Tamam olmalıdır, çünkü bir satır yerine daire içine alınmış başka bir resim düzgün çalışır. SVG verileri, https://jakearchibald.github.io/svgomg/ ile optimize edilmiştir. Manuel olarak değiştirmedim.
div {
height: 30px;
width: 100px;
border: 1px solid black;
background-repeat:no-repeat;
background-position:100% 0;
}
.utf {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M1.168.47L15.53.53l.033 14.332z' fill='#00c000' fill-rule='evenodd' stroke='#00c000' /></svg>");
}
.base64 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBkPSdNMS4xNjguNDdMMTUuNTMuNTNsLjAzMyAxNC4zMzJ6JyBmaWxsPScjMDBjMDAwJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnIHN0cm9rZT0nIzAwYzAwMCcvPjwvc3ZnPg==");
}
.circle {
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>");<div class='utf'>UTF</div>
<div class='base64'>Base64</div>
<div class='circle'>utf circle</div>çalıştırın bu örnek, üç div'ler vardır, ilki başarısız base64 eserleri gibi SVG verilerine sahip ikincisi, ve düz metin olarak veri var sonuncusu ancak bir daire elemanı ile çalışır.
Neden başarısız?