在svg中更改半圈的背景颜色

Question

i want to create First and third quarter moon on this svg code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.336 380.336">
    <g stroke="#000">
      <circle cx="30" cy="30" r="27" style="fill:#FFF;stroke-width:4"/>  
 </g>
</svg>

like this

First quarter moon

Third quarter moon

here moon border is light but i want to like strong

Answer 1

There are a number of ways you could do it. Other than making a half-circle in a vector editor of course.

The simplest may be to use a clipPath. We take a copy of the circle, but filled with black. Then we cut off half of it.

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.336 380.336"> <defs> <clipPath id="left-half"> <rect x="0" y="0" width="30" height="60"/> </clipPath> <clipPath id="right-half"> <rect x="30" y="0" width="30" height="60"/> </clipPath> </defs> <g stroke="#000"> <circle cx="30" cy="30" r="27" style="fill:#FFF;stroke-width:4"/> <circle cx="30" cy="30" r="27" style="fill:#000;" clip-path="url(#left-half)"/> </g> </svg> 

Answer 2

Create a linear gradient with the fill you want. The gradient stops provide the colour change. Having 2 stops together makes the opacity change immediate.

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.336 380.336"> <defs> <linearGradient id="right-half" stop-color="black"> <stop offset="0" stop-opacity="0"/> <stop offset="0.5" stop-opacity="0"/> <stop offset="0.5" stop-opacity="1"/> <stop offset="1" stop-opacity="1"/> </linearGradient> <linearGradient id="left-half" stop-color="black"> <stop offset="0" stop-opacity="1"/> <stop offset="0.5" stop-opacity="1"/> <stop offset="0.5" stop-opacity="0"/> <stop offset="1" stop-opacity="0"/> </linearGradient> </defs> <g stroke="#000"> <circle cx="30" cy="30" r="27" style="fill:url(#right-half)"/> <circle cx="90" cy="30" r="27" style="fill:url(#left-half)"/> </g> </svg>