svg 知识点总结

1. 引用 svg，直接用 img 标签

<img src="帐篷.svg" alt="露营">

2. 画 svg 各种图形。

• 矩形 rect
• 圆角矩形 rect
• 圆圈 circle
• 椭圆 ellipse
• 线段 line
• 折线 polyline
• 多边形 polygon
• 路径 path

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

总结

对于前端开发来讲，将 svg 当成图片用就行（矢量图）。

后续

svg 还有滤镜也可以学学，<filter>

附录

帐篷 svg 代码太长，就只发图片了。