SVG学习path的demo

by Mike Lin

HTML

<body>
<div id="container">
  <svg width="200" height="200" style="border:1px solid #f44336">
    <path d="M100 100 A 40 40 0 0 0 140 60" fill="transparent" stroke="#03a9f4" stroke-width="3"/>
    <circle cx="140" cy="100" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
    <circle cx="100" cy="60" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
<div id="container">
  <svg width="200" height="200" style="border:1px solid #f44336">
    <path d="M100 100 A 40 40 0 1 0 140 60" fill="transparent" stroke="#03a9f4" stroke-width="3"/>
    <circle cx="140" cy="100" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
    <circle cx="100" cy="60" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
<div id="container">
  <svg width="200" height="200" style="border:1px solid #f44336">
    <path d="M100 100 A 40 60 0 1 0 140 60" fill="transparent" stroke="#03a9f4" stroke-width="3"/>
    <circle cx="140" cy="100" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
    <circle cx="100" cy="60" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
<div id="container">
  <svg width="200" height="200" style="border:1px solid #f44336">
    <path d="M100 100 A 40 60 40 1 0 140 60" fill="transparent" stroke="#03a9f4" stroke-width="3"/>
    <circle cx="140" cy="100" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
    <circle cx="100" cy="60" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
<div id="container">
  <svg width="200" height="200" style="border:1px solid #f44336">
    <path d="M100 100 A 40 60 40 0 1 140 60" fill="transparent" stroke="#03a9f4" stroke-width="3"/>
    <circle cx="140" cy="100" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
    <circle cx="100" cy="60" r="40" fill="transparent" stroke="#f44336" stroke-width="1"/>
  </svg>
</div>
</body>