绘制矩形
<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>
