响应式网站和自适应网站区别,安卓开发,网络空间安全专业,网站开发设计公把代码保存为html格式的文件中,用浏览器访问,即可右键保存 从AI软件或其它网站得到svg图片代码后,把他复制到下面源码上 注意:src图片地址中,一些参数的含义 d‘这里是图片代码数据’ viewBox是图片显示区域,宽,高等 fill%23000000’这里表示颜色 ,后面6位0表示黑色…把代码保存为html格式的文件中,用浏览器访问,即可右键保存 从AI软件或其它网站得到svg图片代码后,把他复制到下面源码上 注意:src图片地址中,一些参数的含义 d‘这里是图片代码数据’ viewBox是图片显示区域,宽,高等 fill%23000000’这里表示颜色 ,后面6位0表示黑色,只修改后6位即可 fill-opacity为1表示图片不透明.小数为透明.其它参数 不用修改
!DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlesvg转png/title
/head
body
img idtest srcdata:image/svgxml;
utf8,%3Csvg xmlnshttp://www.w3.org/2000/svg
viewBox0 0 555 344 width555
height344%3E%3Cpath
fill%23000000
fill-opacity1
dM33.7 33.8v-7.5c0-8.2-3.8-11.7-8.1-11.7-6.7 0-8.9 3.5-8.9
%3E%3C/path%3E%3C/svg%3Ep styleborder:1px solid #ccc;color:red
右键点击,图片另存为,png格式的
img idpngsrchref /
/pscript typetext/javascriptvar test document.getElementById(test);var svghtml test.getAttribute(src);
var png document.getElementById(png);var img new Image();img.setAttribute(src, svghtml);img.onload function () {var canvas document.createElement(canvas);canvas.width test.offsetWidth;canvas.height test.offsetHeight;var context canvas.getContext(2d);context.drawImage(img, 0, 0);var canvasData canvas.toDataURL(image/png);var a document.createElement(img);var img2 document.createElement(img);img2.setAttribute(src, canvasData);
png.setAttribute(src, canvasData);// img2.onload function() {// var a document.createElement(a);// a.href url;// a.download svg.png;// a.href img2.getAttribute(src);// a.click();// }}
/script
/body
/html
