那我们现在就来在我们的区域中，绘制出我们最简单的一笔吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ zoom:10; } svg{ background: yellow; } </style> </head> <body> <svg> <path fill="red", stroke-width="1", stroke="#000000" d=" M 0,0 l 18,18 z" /> </svg> </body> </html>内部使用属性如下：
属性名称 属性含义
fill 填充颜色
stroke-width 绘制边框的宽度
stroke 绘制边框的颜色
这样绘制出来的，就是一条直线啦。
这时候有人可能要问了，你怎么知道要写18？ 为什么写 18 就是到中间的位置了呢？
还记得我创建的时候，宽度是多少么？
实际上，你设置了多少宽，你的绘制区域就多大。
这样解释的话，大家是不是就明白了，这个 SVG 到底是怎么回事了？
5.后记关于 SVG 更多的说明，大家可以直接上网查询一下，我在这里就不做更多的说明了。
最后，补充一句。
SVG 和 Canvas 各有千秋，具体使用哪种还是需要自己去根据实际情况分析。
另外补充一句，SVG 算点实在太蛋疼了，强烈推荐大家去使用 SVG 编辑器来创建复杂的图形。
本文是作者原创，如果搬运，请注明出处。
请尊重作者劳动成果，谢谢配合。
李鹏
2016年09月29日
相关文章
精彩导读
热门资讯
关注我们
