SVG图片文件转换成Inline Code 的非完美解决方案
svg图片可以用css代码控制其样式, 但作为图片导入的时候css不起作用, 这时候可以用这种办法.
SVG图片文件转换成Inline Code
使用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之类的使用这个方法将会是个噩梦...
注1
因为我使用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的前端 ㅠㅠ)
相关推荐
MIKUScallion 2020-07-05
mapaler 2020-06-21
hermanncain 2020-05-09
jinxiutong 2020-02-10
Elena0 2020-01-12
Dickzeng 2019-12-20
Dickzeng 2019-11-03
mozhi00 2019-10-04
mapaler 2020-07-17
Dickzeng 2020-07-05
wallowyou 2020-06-28
hermanncain 2020-06-25
Dickzeng 2020-06-17
程序员俱乐部 2020-06-11
lanzhusiyu 2020-06-09
Elena0 2020-04-11
Leonwey 2020-04-11
wallowyou 2020-03-05