svg 超详细 制作

最近网站开发，发现网站用到 svg。感觉这么简单东西，随便弄弄就行。结果倒腾半天没弄好。还是去学习了一下。经验分享一下吧。给遇到同样问题的程序狗们一点指引，少走弯路。

 网站上的点赞，点完后，显示已点赞。

我做的效果图

这种图不是普通的加个 jpg或者png就行。它是跟html标签差不多可以，指定属性就改变颜色的

     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="1024px" height="1024px" viewBox="-31.873 29.659 1024 1024"
     enable-background="new -31.873 29.659 1024 1024" xml:space="preserve">

像这样，指定一下 style fill 就能变成红色

具体制作过程

打开 ai 新建文件

2 钢笔工具

绘制 三个路径

两个小的路径，选中 右击 排列 置于顶层 三个路径放到一起

ctrl F11 

选择

使用奇偶填充规则

然后选中 三个对象 依次点击  对象 复合路径 建立

存储为web格式，选择 svg即可

都看到这里了，是时候打赏一下啦！！！！！！！！！！！！！！！

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

谢谢大爷

得到的代码

    
]>

     x="0px" y="0px" width="1024px" height="1024px" viewBox="-69.934 -169.91 1024 1024"
     enable-background="new -69.934 -169.91 1024 1024" xml:space="preserve">


#040000" stroke="#000000" stroke-miterlimit="10" d="M792.066,0.5
    l60.242,454.217L0.5,443.874V0.5H792.066z M437.464,69.174l20.481,321.688l321.688-43.373L757.945,78.813L437.464,69.174z
     M39.873,78.813l9.638,285.542l308.434-18.072L344.692,69.174L39.873,78.813z"/>

然后把 绿色那俩地方删掉

用style 填充颜色即可

代码+效果图

红色代码为 设置的颜色代码

     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="1024px" height="1024px" viewBox="-69.934 -169.91 1024 1024"
     enable-background="new -69.934 -169.91 1024 1024" xml:space="preserve">