写了一个 JS 将 svg sprite 加载到页面上脚本,已经放在 github,可以 bower 安装

2015-07-15 21:40:56 +08:00
 redyyu
------------------------
https://github.com/Soopro/svg-sprites-render

bower install svg-sprites-render
------------------------

文档看github里面的

js 读取svg sprites 文件,并且根据html 中的属性,将sprite单元渲染到对应svg tag中。支持 icomoon 之类的 svg sprites 生成器生成的svg 文件。

写这个的目的是为了让svg sprite在使用的时候 能具备 inline svg的特性,可以用css fill color 之类的特性,如果用 svg 做 background 不用遮罩干不了这事儿,而且大小宽高 在不同浏览器里面实际上是有差别的(这也要看svg生成的好不好)

搜到有一说可以用 svg fragment 类似 svg_name.svg#fragId 之类的方式通过src加载,我之前也试过,然而并没有什么卵用。 在Safari有跳帧的现象。

两天没有找到靠谱的库(snap svg 可以用,但是太重,没有选)

往上搜到过一些说用svg sprite 不好的地方,那么用这个脚本 干脆就把 svg inline了。
只要是现代浏览器,都应当完美支持。

昨天一些人也没有见靠谱的解决方案,于是自己写一个凑合用先。
在 angular material 中用类似的效果,实现它的 md-icon,它咋个实现我没看,但是html 上写的时候差不多。

PS: 老IE 支持不支持 不在我的考虑之内,很抱歉。。。微软自己都不要的东西,我也不会鸟他。
2893 次点击
所在节点    JavaScript
2 条回复
bramblex
2015-07-16 12:02:29 +08:00
还以为是妹纸
redyyu
2015-07-17 01:31:24 +08:00
Update 到 0.0.5 此前的版本 忘了 safari 和 opera 的支持。太傻逼了。。。今天用的时候发现了就修掉了。
IE 还是没有测,理论上说 IE 10 以上可以支持。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/205950

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX