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格式的筆記