其他分享
首页 > 其他分享> > 614 svg入门案例：绘制点、矩形、直线和圆形

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

作者：互联网

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

<iframe height="300" src="https://www.youbaobao.xyz/datav-res/examples/test-svg.html" style='color: rgba(44, 62, 80, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0; text-transform: none; white-space: normal; widows: 2; word-spacing: 0; -webkit-text-stroke-width: 0px; background-color: rgba(255, 255, 255, 1); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial' width="100%"></iframe> 
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <svg width="800" height="800">
      <rect
        width="50"
        height="50"
        style="fill:red;stroke-width:0;stroke:rgb(0,0,0);"
      />
      <line 
        x1="100" 
        y1="100" 
        x2="250" 
        y2="75"
        style="stroke:blue;stroke-width:1"
      />
      <line 
        x1="250" 
        y1="75" 
        x2="300" 
        y2="100"
        style="stroke:blue;stroke-width: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-width: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-width: 1;" />
    <line x1="250" y1="75" x2="300" y2="100" style="stroke:blue;stroke-width: 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-width: 1;" />
  </svg>
</body>

</html>

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

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

TIP

svg 参考手册

标签：入门,svg,614,绘图,标签,编写,矩形
来源： https://www.cnblogs.com/jianjie/p/14410818.html