一、SVG基本形状：
1.线段
<svg> <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke:black;"/> </svg>
2.矩形
<svg> <rect x="10" y="10" width="30" height="50"/> </svg>
3.圆和椭圆
<svg> <circle cx="30" cy="30" r="20" style="stroke:black;fill:none"/> </svg>
4.多边形
<svg> <polygon points="35,27.7 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 style="fill:#ccffcc;stroke:black;stroke-width:2"/> </svg>
5.折线:最好fill:none否则svg会尝试填充形状
<svg> <polyline points=“5 20,20 20，25 10,35 30，45 10,55 30 ，65 10， 75 30 80 20,95 20” style="stroke:black;stroke-width:3;fill:none;"/> </svg>
6.线帽和线连接
<svg> <line x1="10" y1="15" x2="50" y2="15" style="stroke:black;stroke-linecap:butt;stroke-width:15;"/> <line x1="10" y1="45" x2="50" y2="45" style="stroke:black;stroke-linecap:round;stroke-width:15"/> <line x1="10" y1="75" x2="50" y2="75" style="stroke:black;stroke-linecap:square;stroke-width:15;"/> <!--灰色线--> <line x1="10" y1="0" x2="10" y2="100" style="stroke:#999;"/> <line x1="50" y1="0" x2="50" y2="100" style="stroke:#999;"/> </svg>
二、SVG分组和引用对象
1.<g>元素可以将图片进行分组组合在一张svg上面
<svg> <g id="man" style="fill:none;stroke:black"> <desc>Male human</desc> <circle cx="85" cy="56" r="10"/> <line x1="85" y1="66" x2="85" y2="80"/> </g> </svg>
2.<use>元素就可以复制粘贴元素
<svg> <g id="man" style="fill:none;stroke:black"> <desc>Male human</desc> <circle cx="85" cy="56" r="10"/> <line x1="85" y1="66" x2="85" y2="80"/> </g> <use xlink:href="#man" x="-30"y="100"/> </svg>
3.<defs>元素可以隐藏模型元素，然后让<use>进行复制
<svg> <defs> <g id="man" style="fill:none;stroke:black"> <desc>Male human</desc> <circle cx="85" cy="56" r="10"/> <line x1="85" y1="66" x2="85" y2="80"/> </g> <use xlink:href="#man" x="-30"y="100"/> </svg>
未完待续。。。。
原文：https://www.cnblogs.com/yrxl/p/13177346.html