使用路径在svg中创建打蜡新月

Question

我希望在这个svg上创造任何月亮阶段，如打蜡新月和其他阶段。

svg代码必须是动态的，才能创建从1阶段到28阶段的任何月相阶段

     <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" >
    <g><circle cx="60" cy="60" r="50" fill="#fff" stroke="#000" stroke-width="7"/>
<path d="m60 8a48 52 0 0 0 0 105l0-105z"/></g></svg>

像这样但这里没有任何背景就像蓝色

Answer 1

为了模仿月亮的阶段，我使用了两个圆圈。

黄色的底部圆圈是fill =" # E7D68C "模仿满月。

上方黑色圆圈向左移动，与黄色圆圈重叠，模仿地球与太阳光线重叠的月球运动。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"  viewBox="0 0 73 73" >
<defs>
 <radialGradient id="RadialGrad"
           fx="50%" fy="50%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="#E7D68C" stop-opacity="1"/>
          <stop offset="100%" stop-color="#FFFEED" stop-opacity="1" />
        </radialGradient>

</defs>
<rect width="100%" height="100%" />
<g transform="rotate(-20 35.5 35.5)">
<circle cx="35.5" cy="35.5" r="35" stroke="none"  fill="url(#RadialGrad)" />

 <circle cx="35.5" cy="35.5" r="35" stroke="none" fill="black" >
 
 <animate id="youngMoon" attributeName="cx" values="35.5;-35.5;" begin="1s;oldMoon.end+1s" dur="10s" fill="freeze" />
<animate id="oldMoon" attributeName="cx" values="105;35.5;" begin="youngMoon.end+1s" dur="10s"  fill="freeze" /> 

</circle> 
</g>
</svg>