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格式的笔记
posted @ 2020-05-27 18:43  lanshanxiao  阅读(...)  评论(...编辑  收藏