1.svg:绘制缩放的矢量图形
2.语法
<svg style="width: 1000px;height:1000px ">
<circle r=" 100" cx="500" cy="600" fill="red"></circle>
</svg>
<!-- circle表示绘制的图形为圆形 cx表示圆心距左边的距离 cy表示圆心距上面的距离 fill表示图形内填充的颜色 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
svg {
border: 1px solid red;
}
</style>
</head>
<body>
<svg style="width: 1000px;height:1000px ">
<circle r=" 100" cx="500" cy="600" fill="red"></circle>
<!-- circle表示绘制的图形为圆形 cx表示圆心距左边的距离 cy表示圆心距上面的距离 fill表示图形内填充的颜色 -->
</svg>
</body>
</html>
3.svg内置的几种图形
rect(矩形)
circle(圆)
ellipse(椭圆)
line(直线)
polyline(折线)
polygon(多边形)
path(路径)
4.内置图形的属性
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]