使用者:閉恩濡
出自六年制學程
SVG筆記
- 電腦中兩種主要影像格式區分：
- 點陣式影像：包含JPG,PNG，在網頁上會用Canvas來處理
- 向量繪圖：包含SVG,PS,AI，會以SVG處理
初始設定
- 位置：svg應插入於網頁中的body間，寫法為：
<body> <svg></svg> </body>
- 設定框線：<svg(空格）width(寬)="數字"（空格）height(高)="數字"（空格）style(框線樣式)="border:1px（空格）solid（空格）（色碼）;">
- 範例：<svg wight="600" height="600" style="border:1px solid #000000;">
名詞解釋
- line：線段
- circle：圓形
- rect (rectangle)：長方形
- polygon：多邊形，三個邊以上就是多邊形
- stroke：邊線
- fill：填滿
圖形公式
- 位置：若安插在畫的框線裡，記得把公式置入在<svg>內。
- 線段公式：
- <line（空格）x1="數字座標"（空格）y1="數字座標"（空格）x2="數字座標"（空格）y2="數字座標"（空格）stroke="顏色"（空格）stroke-width="數字"
- 範例：<line x1="50" y1="50" x2="350" y2="350" stroke="red" stroke-width="2"></line>
- <line（空格）x1="數字座標"（空格）y1="數字座標"（空格）x2="數字座標"（空格）y2="數字座標"（空格）stroke="顏色"（空格）stroke-width="數字"
- 圓形公式：
- <circle（空格）cx="數字"（空格）cy="數字"（空格）R（半徑）="數字"（空格）fill="色碼"
- 範例：<circle cx="200" cy="50" r="50" fill="#ffcc00"></circle>
- <circle（空格）cx="數字"（空格）cy="數字"（空格）R（半徑）="數字"（空格）fill="色碼"
- 方形公式：
