[TOC] ## `<svg>` - SVG 圖像默認大小是300像素（寬） x 150像素（高） 屬性 ``` width height viewBox 視圖 橫坐標,縱坐標,視口寬度,視口高度 ``` 例: ``` <svg width="100%" height="100%"></svg> //or <svg width="350" height="160"></svg> // viewbox <svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg> ``` ## `<circle>` 屬性 ``` cx,cy 橫坐標、縱坐標 r 半徑 ``` CSS 屬性 ``` fill：填充色 stroke：描邊色 stroke-width：邊框寬度 ``` ## `<line>` 屬性 ``` x1,y1 起始點坐標 x2,y2 終點坐標 ``` css 屬性 ``` stroke：描邊色 stroke-width：邊框寬度 ``` ## `<polyline>` 折現 屬性 ``` points 兩個一組, 表示一個點 ``` css 屬性 ``` fill：填充色 stroke：描邊色 stroke-width：邊框寬度 ``` 示例 ``` <polyline points="3,3 30,28 3,53" fill="none" stroke="black" /> ``` ## `<rect>` 矩形 屬性 ``` x,y 起始點 width,height 寬高 ``` CSS 屬性 ``` fill：填充色 stroke：描邊色 stroke-width：邊框寬度 ``` ## `<polygon>` 多邊型 屬性 ``` points 兩個一組, 表示一個點 ``` css 屬性 ``` fill：填充色 stroke：描邊色 stroke-width：邊框寬度 ``` ## `<text>` ``` x,y 文本基線坐標 ``` 示例 ``` <text x="50" y="25">Hello World</text> ``` ## `<use>` 屬性 ``` href 要復制的id x,y use 的左上角坐標 width,height 寬高坐標 ``` 示例 ``` <circle id="myCircle" cx="5" cy="5" r="4"/> <use href="#myCircle" x="10" y="0" style="fill: blue"/> <use href="#myCircle" x="20" y="0" style="fill: white;stroke: blue" /> ``` ## `<path>` 屬性 ``` d M：移動到（moveto） L：畫直線到（lineto） Z：閉合路徑 ``` 示例 ``` <path d=" M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z "></path> ``` ## `<g>` 封裝成組 封裝成組,方便被 use 復用 示例 ``` <g id="myCircle"> <text x="25" y="20">圓形</text> <circle cx="50" cy="50" r="20"/> </g> <use href="#myCircle" x="100" y="0" fill="blue" /> <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" /> ``` ## `<defs>` 定義,僅供應用 示例 ``` <defs> <g id="myCircle"> <text x="25" y="20">圓形</text> <circle cx="50" cy="50" r="20"/> </g> </defs> <use href="#myCircle" x="0" y="0" /> <use href="#myCircle" x="100" y="0" fill="blue" /> <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" /> ``` ## `<pattern>` 示例: 把圓填重復充進矩形中, ``` <svg width="500" height="500"> <defs> <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="50" cy="50" r="35" /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" /> </svg> ``` ## `<image>` 屬性 ``` href 圖片路徑 ``` 示例 ``` <image xlink:href="path/to/image.jpg" width="50%" height="50%"/> ``` ## `<animate>` 屬性 ``` attributeName：發生動畫效果的屬性名。 如 x,y,with,height，opacity 等 from：單次動畫的初始值。 to：單次動畫的結束值。 dur：單次動畫的持續時間。 repeatCount：動畫的循環模式。 ``` 可以在多個屬性上定義 示例 ``` <rect x="0" y="0" width="100" height="100" fill="#feac5e"> <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> </rect> ``` 多個屬性 ``` <rect x="0" y="0" width="100" height="100" fill="#feac5e"> <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> <animate attributeName="y" from="0" to="300" dur="2s" repeatCount="indefinite" /> </rect> ``` ## `<animateTransform>` 變形 `<animate>`標簽對 CSS 的`transform`屬性不起作用，如果需要變形，就要使用`<animateTransform>`標簽 屬性 ``` attributeName 一般為 transform type 類型如 scale | rotate | skewX | skewY begin 多久之后開始運動 dur 周期 from to repeatCount ``` 示例: 旋轉角度 ``` <rect x="250" y="250" width="50" height="50" fill="#4bc0c8"> <animateTransform attributeName="transform" type="rotate" begin="5s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" /> </rect> ``` `from="0 200 200"` 表示角度為0,從,200,200 開始旋轉,`to="360 400 400"`表示結束時，角度為360，圍繞(400, 400)旋轉,當然也可以改成`to=360 200 200` 示例:放大 ``` <rect x="0" y="0" width="50" height="50" fill="#4bc0c8"> <animateTransform attributeName="transform" type="scale" begin="0s" dur="2s" from="1" to="2" fill="freeze" repeatCount="indefinite" /> </rect> ``` `form=1,to=2` 的意思為從1倍放大到兩倍 `from="1 1" to="1 2"`意思為x坐標不放大,y坐標從1倍放大到兩倍 ## JavaScript 操作 ``` <style> rect{ fill: #0a2b1d; } </style> <svg width="500px" height="500px"> <rect x="0" y="0" width="50" height="50" fill="#4bc0c8"> </rect> </svg> // js <script> let e = document.getElementById("demo"); e?.addEventListener("click",()=>{ e.setAttribute("width","100") },false) </script> ```