在svg中更改半圈的背景颜色 [英] change background color of half circle in svg

问题描述

我想在此svg代码上创建第一个和第三个四分之一月

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>

像这样

第一季度的月亮

第三季度四分之一

这里的月亮边框很浅，但我想喜欢结实的

here moon border is light but i want to like strong

推荐答案

您可以通过多种方法进行操作.除了在矢量编辑器中制作半圆以外.

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

最简单的方法可能是使用clipPath.我们取一个圆圈的副本，但用黑色填充.然后我们剪掉一半.

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>

这篇关于在svg中更改半圈的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！