Question

是否可以在HTML中使用SVG绘制新月？我一直在W3 Schools尝试，但我没有看到这样的例子。我不需要你在“新月”的典型谷歌图片中看到的任何阴影，只是一个坚固的边界新月。

Answer 1

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

<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）的相反方向绘制另一条弧，两个轴的raidus为30。

z很好地加入两端

有关详细信息，请参阅SVG specification

Answer 2

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

我采取的方法是绘制具有相同背景的另一张图像。它看起来像： drawing 2 images

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

drawing third image

现在将第3个图像边框设置为白色，它将如下所示：

eliminate border

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

您可能还想看看clipping and masking。这可能是一种更好的方法。

<!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>

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

Answer 3

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

http://codebox.org.uk/pages/html-moon-planet-phases

（免责声明 - 我写的）

Answer 4

我发现现有的答案缺乏复活节彩蛋的诗意，不是基于科学，也不是用户友好。

这是我为“黑暗模式”构建的图标：

<svg id="moon" viewBox="-6 -6 12 12">
    <title>Dark mode</title>
    <defs>
        <mask id="earth">
            <rect fill="white" x="-5" y="-5" width="10" height="10"></rect>
            <circle fill="black" cx="3.141592654" r="5"/>
        </mask>
    </defs>
    <circle r="5" fill="currentColor" mask="url(#earth)" transform="rotate(-23.5)"/>
</svg>

须知：

视图框居中
未提供宽度和高度，因为这是可缩放的矢量图形
可以在CSS中指定比例
常绿浏览器中不需要标准的svg命名空间定义
遮罩是一个偏移圆，被pi偏移只是为了向该圆致敬。
图标倾斜23.5度，这是地球的倾斜度
将id标签合理地命名为“ earth”（蒙版）和“ moon”（图标）
填充为currentColor，因此图标在白页上为黑色，在黑页上为白色
为简洁起见，没有给出圆的原点，因为它默认为视图框的中心，而视图框的原点为负。
如果需要固定大小，则可以添加宽度和高度
如果在文档中内联用作可点击图标，则CSS需要指定pointer-events: bounding-box以便有一个点击区域
出于可用性的考虑，您可以将<title>更改为所需的内容
视图框包括填充，要增加填充量，请相应地更改视图
图标的重量应少于256个字节

如果复活节彩蛋在您的工作场所在道德上是错误的，并且您无法内联SVG，则可以将此oneliner保存为图像并以这种方式使用：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="-6 -6 12 12"><defs><mask id="a"><rect width="10" height="10" x="-5" y="-5" fill="#fff"/><circle cx="3" r="5"/></mask></defs><circle r="5" fill="currentColor" mask="url(#a)" transform="rotate(-23)"/></svg>

即使没有浮点数，它的图标大小也一样。

如果要在CSS中使用内联图标而不是在文档中使用内联图标（使演示不使用标记），则可以使用SVG内容指定CSS变量，然后在伪选择器中使用它。

在用于更改为“暗模式”的脚本中，您可以更新CSS变量，或者如果您还想要一些信息性文本，则可以按照通常的方法添加一个类来隐藏它，例如：:

[].map.call(document.querySelectorAll('button'), function (event) {
    event.addEventListener("click", function (event) {                       [].map.call(document.querySelectorAll('button'), function (el) {
            el.classList.toggle('hide');
        });
    });
});

:root {
                --icon-moon-dark: url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-6 -6 12 12"> \
                <defs> \
                    <mask id="earth"> \
                        <rect fill="white" x="-5" y="-5" width="10" height="10"></rect> \
                       <circle fill="black" cx="3.141592654" r="5"/> \
                    </mask> \
                </defs> \
                <circle r="5" fill="white" mask="url(%23earth)" transform="rotate(-23.5)"/> \
            </svg>');
            --icon-moon-light: url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-6 -6 12 12"> \
                <defs> \
                    <mask id="earth"> \
                        <rect fill="white" x="-5" y="-5" width="10" height="10"></rect> \
                       <circle fill="black" cx="3.141592654" r="5"/> \
                    </mask> \
                </defs> \
                <circle r="5" fill="black" mask="url(%23earth)" transform="rotate(-23.5)"/> \
            </svg>');
    }
    
    .hide {
        display: none;
    }
    nav > button {
        padding:0;
        font-size: x-large;
    }
        
    #dark-mode span {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        grid-auto-flow: column;
        text-transform: uppercase;
        font-family: fantasy;
        padding: .5em 1em;
    }

    #dark-mode span::before {
        content: var(--icon-moon-light);
        width: 1.5em;
        height: 1.5em;
    }
    #light-mode span {
        background: black;
        color: white;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        grid-auto-flow: column;
        text-transform: uppercase;
        font-family: cursive;
        padding: .5em 1em;
    }

    #light-mode span::before {
        content: var(--icon-moon-dark);
        width: 1.5em;
        height: 1.5em;
    }

<nav><button id="dark-mode" class="hide"><span>Light mode</span></button>
<button id="light-mode"><span>Dark mode</span></button><nav>

Answer 5

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

http://jsfiddle.net/KA3yp/1/

HTML：

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

CSS：

.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;
}

Answer 6

我使用Raphael.js在这里绘制这个月亮：http://jsfiddle.net/franky85/SX3g8/

或者使用这样的代码：

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的文件在这里：http://raphaeljs.com/reference.html

使用HTML中的SVG绘制新月

6 个答案: