2014-10-02 64 views
0

當我通過grunticon將我的svg和png圖像轉換爲數據uris時,爲png生成的代碼工作正常,但svg圖像未呈現(錯誤:未能加載給定的URL)。文件的路徑是正確的,可能出錯了?使用Grunticon將SVG圖像轉換爲數據URI時出現的問題

SVG文件:

<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Expanded"><g><g><path d="M43,48H29c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1h14c0.553,0,1,0.448,1,1v46C44,47.552,43.553,48,43,48z M30,46h12  V2H30V46z"/></g><g><rect height="2" width="5" x="29" y="8"/></g><g><rect height="2" width="5" x="29" y="14"/></g><g><rect height="2" width="5" x="29" y="20"/></g><g><rect height="2" width="5" x="29" y="26"/></g><g><rect height="2" width="5" x="29" y="32"/></g><g><rect height="2" width="5" x="29" y="38"/></g><g><path d="M15,46h-4c-2.757,0-5-2.243-5-5V12c0-0.197,0.059-0.391,0.168-0.555l6-9c0.371-0.557,1.293-0.557,1.664,0l6,9  C19.941,11.609,20,11.803,20,12v29C20,43.757,17.757,46,15,46z M8,12.303V41c0,1.654,1.346,3,3,3h4c1.654,0,3-1.346,3-3V12.303  l-5-7.5L8,12.303z"/></g><g><path d="M19,40H7c-0.553,0-1-0.448-1-1s0.447-1,1-1h12c0.553,0,1,0.448,1,1S19.553,40,19,40z"/></g><g><path d="M19,36H7c-0.553,0-1-0.448-1-1s0.447-1,1-1h12c0.553,0,1,0.448,1,1S19.553,36,19,36z"/></g><g><path d="M11,36c-0.553,0-1-0.448-1-1V16c0-0.552,0.447-1,1-1s1,0.448,1,1v19C12,35.552,11.553,36,11,36z"/></g><g><path d="M15,36c-0.553,0-1-0.448-1-1V16c0-0.552,0.447-1,1-1s1,0.448,1,1v19C16,35.552,15.553,36,15,36z"/></g><g><rect height="2" width="6" x="10" y="7"/></g><g><path d="M10,17c-2.206,0-4-1.794-4-4c0-0.552,0.447-1,1-1s1,0.448,1,1c0,1.103,0.897,2,2,2s2-0.897,2-2c0-0.552,0.447-1,1-1  s1,0.448,1,1C14,15.206,12.206,17,10,17z"/></g><g><path d="M16,17c-2.206,0-4-1.794-4-4c0-0.552,0.447-1,1-1s1,0.448,1,1c0,1.103,0.897,2,2,2s2-0.897,2-2c0-0.552,0.447-1,1-1  s1,0.448,1,1C20,15.206,18.206,17,16,17z"/></g></g></g></svg> 

產生的數據URI:

.icon-1 { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3C!DOCTYPE%20svg%20%20PUBLIC%20%5Ci-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%5Ci%20%20%5Cihttp%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%5Ci%3E%3Csvg%20enable-background%3D%22new%200%200%2048%2048%22%20height%3D%2248px%22%20version%3D%221.1%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248px%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22Expanded%22%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%22M43%2C48H29c-0.553%2C0-1-0.448-1-1V1c0-0.552%2C0.447-1%2C1-1h14c0.553%2C0%2C1%2C0.448%2C1%2C1v46C44%2C47.552%2C43.553%2C48%2C43%2C48z%20M30%2C46h12%20%20%20%20%20V2H30V46z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%228%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2214%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2220%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2226%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2232%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2238%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M15%2C46h-4c-2.757%2C0-5-2.243-5-5V12c0-0.197%2C0.059-0.391%2C0.168-0.555l6-9c0.371-0.557%2C1.293-0.557%2C1.664%2C0l6%2C9%20%20%20%20%20C19.941%2C11.609%2C20%2C11.803%2C20%2C12v29C20%2C43.757%2C17.757%2C46%2C15%2C46z%20M8%2C12.303V41c0%2C1.654%2C1.346%2C3%2C3%2C3h4c1.654%2C0%2C3-1.346%2C3-3V12.303%20%20%20%20%20l-5-7.5L8%2C12.303z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C40H7c-0.553%2C0-1-0.448-1-1s0.447-1%2C1-1h12c0.553%2C0%2C1%2C0.448%2C1%2C1S19.553%2C40%2C19%2C40z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C36H7c-0.553%2C0-1-0.448-1-1s0.447-1%2C1-1h12c0.553%2C0%2C1%2C0.448%2C1%2C1S19.553%2C36%2C19%2C36z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M11%2C36c-0.553%2C0-1-0.448-1-1V16c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1v19C12%2C35.552%2C11.553%2C36%2C11%2C36z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M15%2C36c-0.553%2C0-1-0.448-1-1V16c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1v19C16%2C35.552%2C15.553%2C36%2C15%2C36z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%226%22%20x%3D%2210%22%20y%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M10%2C17c-2.206%2C0-4-1.794-4-4c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1c0%2C1.103%2C0.897%2C2%2C2%2C2s2-0.897%2C2-2c0-0.552%2C0.447-1%2C1-1%20%20%20%20%20s1%2C0.448%2C1%2C1C14%2C15.206%2C12.206%2C17%2C10%2C17z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M16%2C17c-2.206%2C0-4-1.794-4-4c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1c0%2C1.103%2C0.897%2C2%2C2%2C2s2-0.897%2C2-2c0-0.552%2C0.447-1%2C1-1%20%20%20%20%20s1%2C0.448%2C1%2C1C20%2C15.206%2C18.206%2C17%2C16%2C17z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; } 
+1

任何代碼樣本,是否可以提供? – JackDev 2014-10-02 07:26:30

+0

您使用的SVG代碼是否作爲獨立的SVG文件工作?也就是說,它是有效的xml,並聲明瞭所有的名稱空間前綴?是否聲明瞭正確的文件類型?有沒有特殊字符?除此之外,我們確實需要查看前後代碼(即原始SVG代碼和數據URI代碼),以確定發生了什麼。 – AmeliaBR 2014-10-02 14:56:40

+0

@AmeliaBR SVG文件正在工作f9(獨立)。我在我的問題中添加了i/p和o/p,看看是否有幫助! – Abhisht 2014-10-03 00:44:49

回答

1

<!DOCTYPE svg PUBLIC \i-//W3C//DTD SVG 1.1//EN\i \ihttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\i>

本聲明包含\i這是無效的。更改爲",您將得到「鉛筆與標尺」圖標。

換句話說,改變%5Ci%22

+0

Thnx @Alvin確實有效! – Abhisht 2014-10-03 04:09:24

相關問題