Inline SVG

SVG 本身被視為圖檔，那麼能不能畫好一個 SVG 後，即時拿來用在 html 中的 img 或 background-image 呢 ? 方法還是有的，只是必須透過 javascript 才行 主要用的技巧是 **<font color="#00f">data:image/svg+xml;base64,[data]</font>** <br> 那麼如果不用 base64 呢 ? 也可以用 **<font color="#00f">data:image/svg+xml;charset=UTF-8,[data]</font>** 或 **<font color="#00f">data:image/svg+xml;utf8,[data]</font>** 而這個 **[data]** 必須用 escape 轉換 在實測過程中發現，平常使用 SVG 時並沒有加上完整檔頭，以致於花了些時間才找到圖片出不來的原因 SVG 檔頭宣告 : **<font color="#00f">xmlns="http://www.w3.org/2000/svg"</font>** ``` <svg xmlns="http://www.w3.org/2000/svg"></svg> ``` 範例如下 : ``` $mmcode(r1) ``` <div class="mmresult r1"> <style> #a1113a_iddiv { width:300px; height:200px; background-image:url(bomb.png); background-size:50px; } </style> <svg id="a1113a_idsvg" xmlns="http://www.w3.org/2000/svg" style="background-color:#ff0" width=200 height=200> <path d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"/> </svg> <img id="a1113a_idimg" width=100/> <img id="a1113a_idimg1" width=100/> <br> <div id="a1113a_iddiv"></div> <script> $(function() { var kk=document.querySelector("#a1113a_idsvg").outerHTML; var k8="data:image/svg+xml;base64,"+btoa(kk); var kt="data:image/svg+xml;charset=UTF-8,"+escape(kk); $("#a1113a_idimg").attr("src",k8); $("#a1113a_idimg1").attr("src",kt); $("#a1113a_idsvg path").attr("fill","#e70"); kk=document.querySelector("#a1113a_idsvg").outerHTML; k8="data:image/svg+xml;base64,"+btoa(kk); $("#a1113a_iddiv").css("background-image","url("+k8+")"); }); </script> </div>