4.标签篇:SVG
# 4.标签篇:svg
- SVG:矢量图，放大不会失真，适合大面积的贴图，通常动画较少或较简单。使用标签和CSS去画
canvas：适合用于小面积的绘图，适合动画
```html
<style>
.line1{
stroke:black;
stroke-width:10px;
}
.line2{
stroke:red;
stroke-width:5px;
}
.circle{
fill:transparent;/*填充色为透明*/
stroke:red;/*设置颜色*/
}
.broken{
fill:transparent;/*填充色为透明*/
stroke:blueviolet;/*设置边线*/
stroke-width:3px;
stroke-opacity:.3;/*边线设置透明度*/
fill-opacity:.3;/*填充色透明度*/
stroke-linecap:butt;/*线两端样式：在原来的基础上，加上一段长度butt:不变;round:圆角;square:方角*/
stroke-linejoin:butt;/*线交汇样式：bevel:截断;round:圆角;mitter:不变*/
}
polygon{
fill:transparent;/*填充色为透明*/
stroke:blueviolet;/*设置边线*/
stroke-width:3px;
}
text{
stroke:blue;
stroke-width:3px;
}
path{
stroke:red;
}
</style>
<svg width="500px" height="300px" style="border:1px solid">
<line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
<line x1="200" y1="100" x2="200" y2="200" class="line2"></line><!--画线，起始坐标，终止坐标-->
<rect height="50" width="100" x="0" y="0" rx="10" ry="10"></rect><!--画矩形，高、宽、起始坐标、圆角-->
<circle r="50" cx="50" cy="220" class="circle"></circle><!--画圆，半径、圆心坐标-->
<ellipse rx="100" ry="30" cx="400" cy="200"></ellipse><!--画椭圆，两个半径、一个圆心坐标-->
<polyline points="0 0, 50 50, 100 100, 100 50" class="broken"></polyline><!--折线：默认会连接填充-->
<polyline points="0 0, 50 50, 100 100, 100 50" class="broken"></polyline><!--折线：默认会填充，不会闭合-->
<polygon points="0 0, 50 50, 100 100, 100 50"></polygon><!--多边形：默认会填充并且闭合-->
<text x="50" y="50">hello world</text><!--文本，出现的位置-->
<text x="50" y="50">hello world</text><!--文本，出现的位置-->
<path d="M 100 100 L 200 100 l 100 100"></path><!--画线，M代表moveTo起点，L代表lineTo终点。 L代表绝对位置，l代表相对位置基于上一个点再移动的距离-->
<path d="M 100 100 H 200 V 200 100 Z"></path><!--H代表水平方向移动到200的位置，h代表水平方向移动200距离，V代表垂直方向的移动到200的位置，v代表垂直方向移动200距离，Z代表线要闭合-->
<path d="M 100 100 A 100 50 0 1 1 150 200"></path><!--画弧，M起点坐标两位，A x轴半径一位 y轴半径一位 旋转角度一位 长弧短弧一位 顺时针逆时针一位 终点坐标两位-->
<!--线性渐变begin-->
<defs><!--定义一个线性渐变，用id值区分-->
<linearGradient id="bg1" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0)"></stop><!--关键点-->
<stop offset="100%" style="stop-color:rgb(255,0,0)"></stop><!--关键点-->
</linearGradient>
</defs>
<rect x="100" y="100" height="100" width="200" style="fill:url(#bg1)"></rect><!--为矩形引用线性渐变样式-->
<!--线性渐变end-->
<!--高斯模糊(高斯滤镜)begin-->
<defs><!--定义一个高斯模糊，用id值区分-->
<filter id="gaussian">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"></feGaussianBlur>
</filter>
</defs>
<rect x="100" y="100" height="100" width="200" style="filter:url(#gaussian)"></rect><!--为矩形引用高斯模糊样式-->
<!--高斯模糊(高斯滤镜)end-->
</svg>
<!--虚线和简单动画begin-->
<style>
.line1{
stroke:black;
stroke-width:10px;
stroke-dasharray: 200px;/*设置为虚线*/
stroke-dashoffset:200px;/*设置虚线偏移量*/
animation:move 2s linear infinite alternate-reverse;
}
@keyframes move{
0%{
stroke-dashoffset:200px;
}
100%{
stroke-dashoffset:0px;
}
}
</style>
<svg width="500px" height="300px" style="border:1px solid">
<line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
</svg>
<!--虚线和简单动画end-->
<!--比例尺begin-->
<!--viewBox(开始坐标x,开始坐标y,横向表示距离（下面的250表示原来500px的距离现在是250px的距离，放大了两倍）,纵向表示距离-->
<svg width="500px" height="300px" viewBox="0,0,250,150" style="border:1px solid">
<rect height="50" width="100" x="0" y="0" rx="10"></rect>
</svg>
<!--比例尺end-->
```
以上是markdown格式的笔记
赞 (0)