是否可以在 HTML 中使用 SVG 绘制新月？我一直在W3 学校尝试，但我没有看到这样的例子。我不需要你在典型的谷歌“新月”图像中看到的任何阴影，只是一个实心边框新月。
问问题
7974 次
6 回答
21
您可以绘制一条带有两条弧线的路径，而不是绘制三个圆：
<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 规范
于 2013-05-21T13:51:47.960 回答
12
请注意，我的解决方案可能不是最好的。我不是矢量图形方面的专家，您绝对应该寻找其他解决方案
我采取的方法是绘制另一个具有相同背景的图像。它看起来像：
为了消除多余的边框，我在它上面画了另一个圆圈
现在将第三个图像边框设置为白色，它看起来像：
如果您不使用边框，则只需要使用 2 个圆圈
您可能还想看看clipping 和 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 并不是您真正应该依赖的参考。它充满了错误的信息和过时的东西。更好的资源包括：
于 2013-05-21T07:30:50.137 回答
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 以便图标在白页上为黑色，在黑页上为白色
- 为简洁起见，没有给出圆圈的原点，因为它默认为视图框的中心，视图框的原点为负
- 如果需要固定大小，则可以添加宽度和高度
- 如果在文档中内联用作可点击图标，则需要
pointer-events: bounding-box指定 CSS 以便有点击区域 - 为了可用性，您可以将其更改为
<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>于 2019-01-31T14:13:11.070 回答
3
这是一个不需要 SVG 的 JS/CSS 解决方案，以防它对任何人有用：
http://codebox.org.uk/pages/html-moon-planet-phases
（免责声明 - 我写的）
于 2015-06-07T10:34:58.097 回答
1
记录：仅 CSS 版本（不需要 SVG）（已更新为实线边框）
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;
}
于 2013-05-21T08:57:02.210 回答
0
我在这里使用 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 库。
Raphael.js 的文档在这里：http ://raphaeljs.com/reference.html
于 2013-05-21T07:40:47.087 回答