SVG学习之贝塞尔曲线

HTML

<body>
<div id="container">
  <svg width="190" height="160" style="border:1px solid #f44336">
     <path d="M10 80 Q 55 10 150 60" fill="transparent" stroke="#f44336" stroke-width="2"/>
     <path d="M10 80 L 55 10 L 150 60" fill="transparent" stroke="#f44336" stroke-width="1"/>
     <path d="M10 80 L 55 10 L 150 88" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
<div id="container">
   <svg width="190" height="160" style="border:1px solid #f44336">
     <path d="M10 80 Q 55 10 100 60 T 180 60" fill="transparent" stroke="#f44336" stroke-width="2"/>
     <path d="M10 80 L 55 10 L 100 60 L 145 110 L 180 60" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
<div id="container">
   <svg width="190" height="160" style="border:1px solid #f44336">
     <path d="M10 80 C 40 10, 65 10, 95 80" fill="transparent" stroke="#f44336" stroke-width="2"/>
     <path d="M10 80 L 40 10 M 65 10 L 95 80" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
<div id="container">
   <svg width="190" height="160" style="border:1px solid #f44336">
      <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 " fill="transparent" stroke="#f44336" stroke-width="2"/>
     <path d="M10 80 L 40 10 M 65 10 L 95 80 L 125 150 M 150 150 L 180 80" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
</body>