绘制矩形

<svg width="500" height="500">
    <!--
    x/y: 指定绘制的位置
    width/height: 指定绘制的大小
    fill: 修改填充的颜色
    stroke: 修改描边的颜色
    stroke-width：描边宽度
    rx/ry：设置圆角的半径，如果只设置一个，两者相同
    -->
    <rect x="100" y="100" width="100" height="100" fill="blue" stroke="black" stroke-width="10" rx="10"></rect>
</svg>

绘制圆形

<svg width="500" height="500">
    <!--方式一-->
    <rect x="100" y="100" width="100" height="100" rx="50"></rect>
    <!--方式二
    cx/cy: 圆绘制的位置
    r: 圆的半径
    -->
    <circle cx="100" cy="100" r="50"></circle>
</svg>

绘制椭圆

<svg width="500" height="500">
    <!--方式一-->
    <rect x="100" y="100" width="200" height="100" rx="100" ry="50"></rect>
    <!--方式二
    cx/cy: 椭圆绘制的位置(圆心的位置)
    rx: 水平方向的半径
    ry: 垂直方向的半径
    -->
    <ellipse cx="100" cy="100" rx="100" ry="50"></ellipse>
</svg>

绘制直线

<svg width="500" height="500">
    <!--绘制直线
    x1/y1: 设置起点
    x2/y2: 设置终点
    -->
    <line x1="100" y1="100" x2="300" y2="100" stroke="#000"></line>
    <!--绘制折线
    points: 设置所有的点，两两一对
    -->
    <polyline points="100 100 300 100 300 300" stroke="#000" fill="none"></polyline>
    <!--绘制多边形
    自动关闭路径
    -->
    <polygon points="100 100 300 100 300 300" stroke="#000" fill="none"></polygon>
</svg>

SVG常用属性

fill: 修改填充颜色
fill-opacity: 0~1 设置填充颜色的透明度
stroke: 修改描边颜色
stroke-width: 修改描边宽度
stroke-opacity: 0~1 设置描边透明度
stroke-linecap: butt/square/round 设置线段两端帽子
stroke-dasharray: 设置虚线
stroke-dashoffset: 设置虚线偏移位
stroke-linejoin: miter/bevel/round 设置折线转角样式

<svg width="500" height="500">
    <rect x="100" y="100" width="100" height="100" fill="blue" fill-opacity="0.3"></rect>
    <line x1="100" y1="300" x2="300" y2="300" stroke="blue" stroke-width="10" stroke-opacity="0.5" stroke-linecap="round"></line>
    <line x1="100" y1="400" x2="300" y2="400" stroke="blue" stroke-width="10" stroke-dasharray="10 20 30" stroke-dashoffset="100"></line>
    <polyline points="100 100 300 100 300 300" stroke="#000" stroke-width="10" fill="none" stroke-linejoin="round"></polyline>
</svg>

用css制作svg小动画

在SVG中标签中的属性都是可以直接在css中使用的

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        svg{
            display: block;
            margin: 0 auto;
            background: skyblue;
        }
        line{
            stroke: red;
            stroke-width: 10px;
            stroke-dasharray: 10px;
            animation: move 10s 0s linear infinite;
        }
        @keyframes move {
            from{
                stroke-dashoffset: 0;
            }
            to{
                stroke-dashoffset: -200px;
            }
        }
    </style>
</head>
<body>
<svg width="500" height="500">
    <line x1="100" y1="100" x2="300" y2="100"></line>
</svg>
</body>