zwblcz 2019-06-27
使用svg图片的好处很多, 其中因为svg图片本身就是有代码构成的矢量图片, 代码是Marked Language, 所以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) if typeof imgID != undefined $svg = $svg.attr('class', imgClass + ' replaced-svg') if typeof imgClass != undefined $svg = $svg.removeAttr('xmlns:a') $img.replaceWith($svg) , 'xml')
在页面导入之前定义svg2inline
, 在使用svg格式图片的时候在<img> 加上svg
类名,
之后再页面渲染之后呼出一次, 页面中的svg图片就都渲染为代码了.
这个方式的最大问题在于,她会对网页中所有的对应图片地址重新要求一次图片, 对与svg内容多的网页会有一定的资源消耗, 效率不高.
只适用于使用若干图片的首页之类.
对列表中使用的svg icon之类的情况,会很浪费
浏览器请求图片的时候都会放到缓存里,有重复的图片就直接调用缓存, 但这个方法则会每次都发送请求. 列表中的icon之类的使用这个方法将会是个噩梦...
因为我使用CoffeeScript, 所以语法看起来会很怪.
svg2inline = function(){ jQuery('.img.svg').each( function() { var $img = jQuery(this); var imgID = $img.attr('id'); var imgClass = $img.attr('class'); var imgURL = $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+' replaced-svg'); } $svg = $svg.removeAttr('smlns:a') $img.replaceWith($svg) }); }); }
好了, 我尝试转成了JS, 太久没用, 又是盲打, 希望没有写错...(请叫我不会用JS的前端 ㅠㅠ)