SVG
很久没写文章了。
最近写了一个svg的圆环，还有刻度，本来打算做个笔记，最后想了想，还是发一篇文章吧。
<!DOCTYPE html>
<html>
<body>
<div class="circle-ring" style="width: 131px; height: 131px;">
<svg style="width: 131px; height: 131px;">
<defs>
<linearGradient id="grad353439" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: rgb(41, 204, 150);"></stop>
<stop offset="100%" style="stop-color: rgb(128, 255, 213);"></stop>
</linearGradient>
</defs>
<path d="
M65.5,65.5
m0,-60.5,
a60.5,60.5,0,1,1,0,121
a60.5,60.5,0,1,1,0,-121
"
fill="none"
stroke="rgba(20, 102, 75, 0.4)"
stroke-width="10"
stroke-dasharray="16, 4">
</path>
<path d="
M65.5,65.5
m0,-60.5,
a60.5,60.5,0,1,1,0,121
a60.5,60.5,0,1,1,0,-121
"
fill="none"
stroke="url(#grad353439)"
stroke-width="10"
stroke-dasharray="16,4,16,4,16,4,16,4,16,4,16,4,16,4,16,4,16,4,0,200.32993874146035">
</path>
</svg>
</div>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="175" cy="75" r="10" fill="red">
<animate attributeName="r"
values="20;50"
keyTimes="0;1"
calcMode="spline"
keySplines="0,0,.58,1"
dur="1"
fill="freeze"></animate>
</circle>
</svg>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。