我想在此 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>
像这样
上弦月
第三弦月
这里的月亮边框很轻，但我想要更强
您可以通过多种方式做到这一点。当然，除了在矢量编辑器中制作半圆之外。
最简单的可能是使用 ClipPath。我们复制一个圆圈，但用黑色填充。然后我们把它切掉一半。
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
