在svg中更改半圆的背景颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在svg中更改半圆的背景颜色相关的知识，希望对你有一定的参考价值。
我想在这个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>另一答案
使用所需的填充创建线性渐变。渐变停止提供颜色变化。一起停两次会立即改变不透明度。
<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>以上是关于在svg中更改半圆的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章