在HTML中使用SVG绘制新月_Html_Css_Svg

在HTML中使用SVG绘制新月

html css svg

在HTML中使用SVG绘制新月,html,css,svg,Html,Css,Svg,可以在HTML中使用SVG绘制新月吗？我一直在尝试，但我没有看到这样的例子。我不需要你在谷歌典型的“新月”图像中看到的任何阴影，只需要一个实心边框的新月。请注意，我的解决方案可能不是最好的。我不是矢量图形方面的专家，你肯定应该寻找其他解决方案我采取的方法是用相同的背景画另一幅图像。它看起来像：为了消除额外的边界，我在它上面画了另一个圆现在，将第三个图像边框设置为白色，其外观如下：如果不使用边框，则只需使用2个圆你可能还想看看。这可能是一个更好的方法 <!DOCTYPE h

可以在HTML中使用SVG绘制新月吗？

我一直在尝试，但我没有看到这样的例子。我不需要你在谷歌典型的“新月”图像中看到的任何阴影，只需要一个实心边框的新月。

请注意，我的解决方案可能不是最好的。我不是矢量图形方面的专家，你肯定应该寻找其他解决方案

我采取的方法是用相同的背景画另一幅图像。它看起来像：

为了消除额外的边界，我在它上面画了另一个圆

现在，将第三个图像边框设置为白色，其外观如下：

如果不使用边框，则只需使用2个圆

你可能还想看看。这可能是一个更好的方法

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
   <circle cx="115" cy="50" r="30" stroke="black" stroke-width="2" fill="white" />
   <circle cx="130" cy="50" r="23" stroke="white" stroke-width="2" fill="white" />
</svg> 

</body>
</html>


我的第一个SVG

旁注：W3Schools并不是你应该依赖的参考资料。它充满了错误的信息和过时的东西。更好的资源包括：

我用Raphael.js在这里画这个月亮：

或者使用如下代码：

var paper = Raphael(0, 0, "100%", "100%");
var backgroundColor = 'white';
var moonColor = 'darkorange';

var c = paper.circle(50, 50, 40).attr({
    fill: moonColor,
    'stroke-width': 0
});

var e = paper.ellipse(50, 50, 20, 40).attr({
    fill: backgroundColor,
    'stroke-width': 0
});

var r = paper.rect(50, 10, 40, 80).attr({
    fill: backgroundColor,
    'stroke-width': 0
});

var set = paper.set();
set.push(c);
set.push(e);
set.push(r);

对于更复杂的SVG绘制，最好使用Raphael.js lib

Raphael.js的文档在这里：

用于记录：仅CSS版本（不需要SVG）（使用实心边框更新）

HTML:

您可以使用两个圆弧绘制路径，而不是绘制三个圆：

这读作

M 50 20

移动到位置（50，20）

A 40 40 0 1 0 50 70

从该点到位置（50,70）绘制一条圆弧。圆弧在x轴上的半径应为40，在y轴上的半径应为40

30 30 01 150 20

从当前点到（50，20）沿相反方向绘制另一条弧，两个轴的半径均为30

巧妙地连接两端

有关更多信息，请参见

这里有一个不需要SVG的JS/CSS解决方案，以防它对任何人都有用：

（免责声明——我写的）

我发现现有的答案缺乏复活节彩蛋的诗意，没有科学依据，也没有那么好用

下面是我为“黑暗模式”创建的图标：


暗模式

接受答案。W3Schools并非没有缺点，但每个人都有自己喜欢的网络参考=）别误会，我不恨W3Schools。在21世纪初，我从学校学到了很多东西。我只是建议一些适合当前时代的东西：）不错的一个@Peter CollingridgeThis是一个比我更好的答案。谢谢你原谅我的noob问题但是你是怎么计算的？有没有一个工具来促进这一点？我只是好奇，我真的很想深入研究SVG。我只是手工做的，从你的例子中使用了40和30的半径，并选取了新月形的点，当我测试它时，看起来还不错。我试了几次才把旗子（arc命令中的0和1）弄到正确的位置。这太漂亮了！

<div class="crescent"></div>

.crescent {
    width: 300px;
    height: 300px;
    background-color: #f00;
    border-radius:150px;
    position: relative;
}

.crescent:before {
    content: "";
    width:220px;
    height: 220px;
    display: block;
    position: absolute;
    border-radius: 110px;
    right: -5px;
    top: 40px;
    background: #fff;
    border: 2px solid #000;
}

.crescent:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 100px;
    content: "";
    display: block;
    height: 140px;
    position: absolute;
    right: -18px;
    top: 83px;
    width: 140px;
}