使用者:閉恩濡

出自六年制學程
跳轉到： 導覽、 搜尋

SVG筆記

  • 電腦中兩種主要影像格式區分：
    1. 點陣式影像：包含JPG,PNG，在網頁上會用Canvas來處理
    2. 向量繪圖：包含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語法

  • 如何打出項目符號與編號
  1. ABC
  2. DEF

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'/>

</svg>

取自「http://nice-learning.tw/wiki1231/index.php?title=使用者:閉恩濡&oldid=55701」