使用者:閉恩濡

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

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>