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

Question

我想在这个svg代码上创建第一和第三季度的月亮

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

像这样

第一季度月亮

第三季度月亮

这里月亮边界很轻但我想要强烈的

Answer 1

有很多方法可以做到。当然，除了在矢量编辑器中制作半圆之外。

最简单的可能是使用clipPath。我们拿一个圆圈的副本，但是用黑色填充。然后我们切掉了一半。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用所需的填充创建线性渐变。渐变停止提供颜色变化。一起停两次会立即改变不透明度。

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