使用HTML中的SVG绘制新月

Question

使用HTML中的SVG绘制新月

mat*_*att 4 html css html5 svg css3

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

Answer 1

Pet*_*dge 17

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

<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规范

Answer 2

Ahm*_*lfy 10

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

我采用的方法是绘制具有相同背景的另一个图像.它看起来像: 画2张图片

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

绘制第三张图片

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

消除边界

如果您不使用边框,则只需使用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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 3

Hen*_*Cat 7

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

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

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

Run Code Online (Sandbox Code Playgroud)

要知道的事情：

视图框居中
未提供宽度和高度，因为这是可缩放的矢量图形
可以在 CSS 中指定比例
常青浏览器中不需要标准 svg 命名空间定义
mask是一个偏移圆，偏移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>

Run Code Online (Sandbox Code Playgroud)

即使没有浮点数，图标大小看起来也是一样的。

如果您想在 CSS 而不是文档中使用内联图标（使演示文稿远离标记），那么您可以指定带有 SVG 内容的 CSS 变量，然后在伪选择器中使用它。

在更改为“深色模式”的脚本中，您可以更新 CSS 变量，或者如果您还需要一些信息性文本，那么您可以执行通常的添加类来隐藏它的方法，例如::

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年前
查看次数：	5581 次
最近记录：	6 年，7 月前