html 5 SVG 在線繪圖體驗

繪圖區

• 幾何圖形 (點選項目複製原始碼)

  1. 正圓

     <svg viewBox="0 0 600 240">
      <circle r="40" cx="40" cy="40" style="fill:yellow;" />
     </svg>

  2. 橢圓

     <svg viewBox="0 0 600 240">
      <ellipse rx="60" ry="30" cx="60" cy="30" style="fill:#ddff00;" />
     </svg>

  3. 矩形

     <svg viewBox="0 0 600 240">
      <rect width="60" height="60" style="fill:yellow;" />
     </svg>

  4. 半圓

     <svg viewBox="0 0 600 240">
      <path d="M40,40 c22.0918,0,40-17.9082,40-40 H0C0,22.0918,17.90869,40,40,40z" fill="red" />
     </svg>

  5. 表情 ;D

     <svg viewBox="0 0 600 240">
      <circle r="40" cx="40" cy="40" style="fill:yellow;" />
      <circle r="10" style="fill:#000066;" transform="translate(20,30) rotate(6) scale(1,0.25)" />
      <circle r="10" style="fill:#000066;" transform="translate(60,30)" />
      <path d="M40,40 c22.0918,0,40-17.9082,40-40 H0C0,22.0918,17.90869,40,40,40z" fill="red" transform="translate(20,50) scale(0.5)" />
     </svg>

• 動畫 (點選項目複製原始碼)

  1. 移動

     <svg viewBox="0 0 600 240">
      <circle r="40" cx="40" cy="40" style="fill:yellow;">
       <animateTransform attributeName="transform" type="translate" to="500" dur="5s" fill="freeze" />
      </circle>
     </svg>

  2. 縮放

     <svg viewBox="0 0 600 240">
      <circle r="40" cx="40" cy="40" style="fill:yellow;">
       <animateTransform attributeName="transform" type="scale" values="1;4;3;4;2" dur="5s" fill="freeze" />
      </circle>
     </svg>

  3. 旋轉

     <svg viewBox="0 0 600 240">
      <g transform="translate(300,120)">
      <ellipse rx="2" ry="50" cx="0" cy="50" style="fill:yellow;">
       <animateTransform attributeName="transform" type="rotate" to="360" dur="5s" repeatCount="indefinite" />
      </ellipse>
      </g>
     </svg>

• 產生圖 (將下方的碼加入繪圖區的 html 中)

• 原始碼： (把原始碼寫進來。繪圖區尺寸，寬 600px 高 240px。)