svg图片的样式可以通过css代码控制，但是css导入为图片时不起作用。这个时候就可以用这个方法了。将SVG图片文件转成InlineCode对于使用svg图片有很多好处，因为svg图片本身有代码组成的矢量图，代码是MarkedLanguage，所以css可以对其进行修改。也就是说，它可以动态改变svg图片元素的样式。但是在网页中使用svg资源时，是根据图片导入的，css代码是不会应用到图片里面的代码的。为了使样式起作用，我们需要公开svg代码。svg2inline:->jQuery('img.svg').each->$img=jQuery(this)imgID=$img.attr('id')imgClass=$img.attr('class')imgURL=$img.attr('src')jQuery.get(imgURL,(data)=>$svg=jQuery(data).find('svg')$svg=$svg.attr('id',imgID)iftypeofimgID!=undefined$svg=$svg.attr('class',imgClass+'replaced-svg')如果typeofimgClass!=undefined$svg=$svg.removeAttr('xmlns:a')$img.replaceWith($svg),'xml')在页面导入前定义svg2inline，在使用svg格式图片类名时将svg添加到![]()
中，然后在页面渲染完成后调用一次，页面上的所有svg图片都会渲染为代码。这种方式最大的问题是，对于网页中所有对应的图片地址，都会重新请求图片，与svg内容相关的比较多，会有一定的资源消耗，效率不高.只适用于有多张图片的首页。对于列表中使用的svg图标等。这样的话，浏览器请求图片的时候会很浪费时间，图片会放在缓存中，如果有重复的图片，会直接调用缓存，但是这个方法每次都会发送一次请求。对列表中的图标使用此方法将是一场噩梦...注1由于我使用CoffeeScript，因此语法看起来很奇怪。svg2inline=function(){jQuery('.img.svg').each(function(){var$img=jQuery(this);varimgID=$img.attr('id');varimgClass=$img.attr('class');varimgURL=$img.attr('src');jQuery.get(imgURL,function(data){var$svg=jQuery(data).find('svg');if(typeof(imgID)!=undefined){$svg=$svg.attr('id',imgID);}if(typeof(imgClass)!=undefined){$svg=$svg.attr('class',imgClass+'替换-svg');}$svg=$svg.removeAttr('smlns:a')$img.replaceWith($svg)});});}好吧，我试过改用JS，但是半天没用，又是touchtyping，希望没有错别字。。。
