在 HTML 中使用 SVG 绘制新月

2024-01-04

是否可以在 HTML 中使用 SVG 绘制新月? 我一直在尝试W3学校 http://www.w3schools.com/svg/但我没有看到这样的例子。我不需要您在“新月”的典型谷歌图像中看到的任何阴影,只需一个实心边框新月。


您可以绘制带有两个圆弧的路径,而不是绘制三个圆:

<path d="M50 20A40 40 0 1 0 50 70 30 30 0 1 1 50 20z" stroke="black" stroke-width="2" fill="red"/>

这读作

M 50 20移动到位置 (50, 20)

A 40 40 0 1 0 50 70从该点到位置 (50, 70) 绘制一条圆弧。该圆弧的 x 轴半径应为 40,y 轴半径应为 40。

30 30 0 1 1 50 20从当前点到 (50, 20) 沿相反方向绘制另一条圆弧,两轴半径均为 30。

z很好地连接两端

欲了解更多信息,请参阅SVG规格 http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 HTML 中使用 SVG 绘制新月 的相关文章