SVG图片文件转换成Inline Code 的非完美解决方案

vslam 发布于2019-08-30 15:53 / 1104人阅读

摘要：图片可以用代码控制其样式但作为图片导入的时候不起作用这时候可以用这种办法图片文件转换成使用图片的好处很多其中因为图片本身就是有代码构成的矢量图片代码是所以可以对其进行修饰也就是说能够对图片的元素进行动态的样式变换但在网页中使用资源的时候是按

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格式图片的时候在加上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的前端 ㅠㅠ)

GPU云服务器云服务器图片转换成txt 文件转换成 aspx文件转换图片 svg图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116787.html

SVG的正确使用姿势

摘要：在中使用很简单，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通过控制，但是又想避免内联的弊端，可以在里面使用。记得去掉换行它可以在上述的所有场景里面使用，除了内联。原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier 翻译作者: https://github.com/chenmf6 翻译出处：https://gi...

leo108 2019-08-30 11:12 评论0 收藏0
SVG的正确使用姿势

摘要：在中使用很简单，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通过控制，但是又想避免内联的弊端，可以在里面使用。记得去掉换行它可以在上述的所有场景里面使用，除了内联。原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier 翻译作者: https://github.com/chenmf6 翻译出处：https://gi...

stackvoid 2019-08-23 18:09 评论0 收藏0
SVG vs Image, SVG vs Iconfont

摘要：结论绿色部分表示比略胜一筹的地方，黄色部分表示有所欠缺的地方，灰绿色表示差不多。兼容性列表可以良好地支持多色及多色变化。以为例说明便捷使用。综上结论选择或许是一个不错地选择去替代的使用方式。这可能是个别人写过很多次的话题，但貌似由于兼容性的原因？图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式？希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs I...

kel 2019-08-29 17:20 评论0 收藏0
SVG vs Image, SVG vs Iconfont

摘要：结论绿色部分表示比略胜一筹的地方，黄色部分表示有所欠缺的地方，灰绿色表示差不多。兼容性列表可以良好地支持多色及多色变化。以为例说明便捷使用。综上结论选择或许是一个不错地选择去替代的使用方式。这可能是个别人写过很多次的话题，但貌似由于兼容性的原因？图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式？希望通过自己新瓶装旧酒的方式能重新引导一下问题。 SVG vs I...

paulquei 2019-08-26 13:26 评论0 收藏0