在svg上實現一個漸變多邊形(內嵌圓形)先向右再向下，然后回到原位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#path1{
fill :green;
fill-rule: evenodd;
margin: 40px 40px 40px 40px;
border: 4px solid black;
padding:10px;
transition: 2s;
animation:moveto 5s 1;
}
@keyframes moveto{
0%{
fill: green;
transform:translate(0);
}
25%{
fill: red;
transform:translate(100px,0);
}
75%{
fill:yellow;
transform:translate(100px,100px);
}
100%{
fill:green;
transform:translate(0,0);
}
}
</style>
</head>
<body>
<div>
<svg width=1000 height=1000>
<path id="path1" stroke-width=3 stroke="black" fill="black"
d="M100 100
L300 100
L350 200
L300 300
L100 300
L50 200 Z
M150 200
A 50 50 0 1 1 250 200
A 50 50 0 1 1 150 200"
></path>
</svg>
</div>
</body>
</html>
效果如下：
注意弧形命令A和a的區別，前者使用絕對坐標，后者時候相對坐標。
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
前兩個參數分別是x軸半徑和y軸半徑，x-axis-rotation是繞x軸旋轉角度，large-arc-flag（角度大小） 和sweep-flag（弧線方向），large-arc-flag決定弧線是大於還是小於180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧。
具體如下(圖源：https://developer.mozilla.org/@api/deki/files/345/=SVGArcs_Flags.png)
