614 svg入门案例：绘制点、矩形、直线和圆形

入门案例：绘制点、矩形、直线和圆形

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <svg width="800" height="800">
      <rect
        width="50"
        height="50"
        style="fill:red;stroke-0;stroke:rgb(0,0,0);"
      />
      <line 
        x1="100" 
        y1="100" 
        x2="250" 
        y2="75"
        style="stroke:blue;stroke-1"
      />
      <line 
        x1="250" 
        y1="75" 
        x2="300" 
        y2="100"
        style="stroke:blue;stroke-1"
      />
      <circle 
        cx="200" 
        cy="200" 
        r="50" 
        stroke="green"
        stroke-width="2" 
        fill="red"
      />
      <line 
        x1="300" 
        y1="300" 
        x2="301" 
        y2="301"
        style="stroke:red;stroke-1"
      />
    </svg>
  </body>
</html>

<!DOCTYPE html>
<html>

<head></head>

<body>
  <svg width="800" height="800">
    <!-- 矩形 -->
    <rect width="50" height="50" style="fill:red;" />

    <!-- 线段，起点、终点/中间点坐标 -->
    <line x1="100" y1="100" x2="250" y2="75" style="stroke:blue;stroke- 1;" />
    <line x1="250" y1="75" x2="300" y2="100" style="stroke:blue;stroke- 1;" />

    <!-- 圆形，和上面写style是一样的 -->
    <circle cx="200" cy="200" r="50" stroke="green" stroke-width="2" fill="red" />
    
    <!-- 点 -->
    <line x1="300" y1="300" x2="301" y2="301" style="stroke:red;stroke- 1;" />
  </svg>
</body>

</html>

思考：你能否总结出 svg 绘图的流程？

编写 svg 标签，指定宽高
编写 svg 绘图标签
编写绘图属性和样式

TIP

svg 参考手册