# 4.標簽篇:svg - SVG:矢量圖，放大不會失真，適合大面積的貼圖，通常動畫較少或較簡單。使用標簽和CSS去畫 canvas：適合用於小面積的繪圖，適合動畫 ```html <style> .line1{ stroke:black; stroke-width:10px; } .line2{ ...
# 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格式的筆記
