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:做圆角 -->
  17. </svg>
  18. </body>