前言
因为感觉在fonticon虽然方便但是因为某些问题不如svg方便
所以就动手了
计划将前端所有用到fonticon的图标全部变更为svgicon
因为已经很久没有触碰html等代码了所以 一切从0开始
过程
第一次使用svg甚至不知道如何调用
显示尝试直接以<Svg><patch></patch></Svg>的方式引用 但是因为内容比较多在代码中看着就是乱乱的 所以决定尝试其他方式
后来参考着是时候了，无外链的CSS开发策略尝试着弄一下
然后发现如果以背景图片background-image方式引入css的话 只能在path中修改fill属性改变颜色 即便不在path中设置fill属性也无法通过外部(css)修改颜色
所以放弃了在css中引入svg
再后来尝试通过<svg><use></use></svg>的方式对svg进行引用 然后发现了一个关于跨域的问题（无法解决）
直到最近 又重新看了 未来必热：SVG Sprites技术介绍这篇文章，发现symbol是一个很神奇的东西于是花了一天多的时间对svg进行合并 到最后的这个样子
然后又发现通过ajax请求可以解决跨域问题
在zheader.php中插入了
var ajax = new XMLHttpRequest();
ajax.open("GET", "*/icon.svg", true);
ajax.onload = function(e) {
document.body.insertAdjacentHTML("afterBegin", '<div style="display:none;">' + ajax.responseText + '</div>');
}
ajax.send();
话虽说可以解决跨域问题 但是新的问题出现了那那就是首次访问还是看不到图标（需要刷新一次才能显示出来）具体原因不明
于是我将这段代码 丢到了sakura-app.js中 解决问题 √
以上就是萌新的svg踩坑记 因为我不够专业 所以 文也是随便码的√