檢視使用者:閉恩濡的原始碼

==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：多邊形，三個邊以上就是多邊形
*text：文字
*stroke：邊線
*fill：填滿
===圖形公式===
*位置：若安插在畫的框線裡，記得把公式置入在<svg>內。
*座標以匡線左上角為0，開始計算
*線段公式：
**<line（空格）x1="數字座標"（空格）y1="數字座標"（空格）x2="數字座標"（空格）y2="數字座標"（空格）stroke="顏色"（空格）stroke-width="數字"
***範例：<line x1="50" y1="50" x2="350" y2="350" stroke="red" stroke-width="2"></line>
*圓形公式：
**<circle（空格）cx="數字"（空格）cy="數字"（空格）R（半徑）="數字"（空格）fill="色碼"
***範例：<circle cx="200" cy="50" r="50" fill="#ffcc00"></circle>
*方形公式：
**<rect（空格）x="數字"（空格）y="數字"（空格）width="數字"（空格）height="數字"（空格）fill="顏色">
***範例：<rect x="30" y="30" width="100" height="120" fill="blue"></rect>
*多邊形公式（以三角形為例）
**<polygon point="座標1（含xy）,座標2（含xy）,座標3（含xy）"（空格）fill="顏色">
***範例：<polygon point="150,200,250,200,200,300" fill="black"></polygon>
*文字：
**<text（空格）x="數字"（空格）y="數字"（空格）fill="顏色"（空格）font-weight（字寬）="樣式"（空格）font-size（大小）="數字">要打的字</text>
***範例<text x="100" y="350" fill="green" font-weight="bold" font-size="45">Hello SVG</text>
===HTML語法===
*如何打出項目符號與編號
<ol>
<li>ABC</li>
<li>DEF</li>
</ol>
===SVG圖像練習===
*圓形
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='12' height='12'>
 <circle cx='6' cy='6' r='4' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'></circle>
</svg>