1、画线

  1. <style>
  2.     .line1{
  3.         stroke: black;
  4.         stroke-width: 3px;
  5.     }
  6.     .line2{
  7.         stroke: red;
  8.         stroke-width: 5px;
  9.     }
  10.  </style>
  11. </head>
  12. <body>
  13. <!-- svg:矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单 标签和css去画
  14.      Canvas：适合小面积的绘图，适合动画
  15. -->
  16.  <svg width="500px" height="300px" style="border: 1px solid">
  17.      <line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
  18.      <line x1="200" y1="100" x2="200" y2="200" class="line2"></line>
  19.  </svg>
  20. </body>

2、画矩形

  1. <style>
  2.     .line1{
  3.         stroke: black;
  4.         stroke-width: 3px;
  5.     }
  6.     .line2{
  7.         stroke: red;
  8.         stroke-width: 5px;
  9.     }
  10.  </style>
  11. </head>
  12. <body>
  13.  <svg width="500px" height="300px" style="border: 1px solid">
  14.      <line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
  15.      <line x1="200" y1="100" x2="200" y2="200" class="line2"></line>
  16.      <rect height="50" width="100" x="0" y="0" rx="10" ry="20"></rect><!-- 所有闭合的图形，在svg中默认都是天生充满并且画出来 --><!-- rx,ry:做圆角 -->
  19.  </svg>
  20. </body>