使用路径在 svg 中创建上蜡新月 [英] Create waxing crescent moon in svg using path

问题描述

我想在这个 svg 上创建任何月相，如上蜡新月和其他月相.

i want to create any moon phases like waxing crescent and other phases on this svg.

svg 代码必须动态创建从 1 月相到 28 月相的任何月相

svg code must dynamic to create any phase of moon from 1 phase to 28 moon phase

     <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>

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

like this but not have any background here is like blue

推荐答案

为了模仿月相，我使用了两个圆圈.

To imitate the phases of the moon, I used two circles.

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

The bottom circle of the yellow color is fill =" # E7D68C " imitates the full moon.

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

The upper black circle moves to the left overlapping the yellow circle, immitting the movement of the earth overlapping the moon from the sun's rays.

<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>

这篇关于使用路径在 svg 中创建上蜡新月的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！