使用HTML中的SVG绘制新月_html-js-css

概述是否可以在 HTML中使用SVG绘制新月？我在 W3 Schools一直在尝试,但我没有看到这样的例子.我不需要你在“新月”的典型谷歌图片中看到的任何阴影,只是一个坚固的边界新月. 请注意,我的解决方案可能不是最好的.在矢量图形方面,我不是专家,你一定要寻找其他解决方案我采用的方法是绘制具有相同背景的另一个图像.它看起来像：为了消除额外的边界,我在它上面画了另一个圆圈现在将第3个图像边框设是否可以在 HTML中使用SVG绘制新月？
我在 W3 Schools一直在尝试,但我没有看到这样的例子.我不需要你在“新月”的典型谷歌图片中看到的任何阴影,只是一个坚固的边界新月.解决方法请注意,我的解决方案可能不是最好的.在矢量图形方面,我不是专家,你一定要寻找其他解决方案

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

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

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

如果您不使用边框,则只需使用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并不是您应该依赖的参考.它充满了错误的信息和过时的东西.更好的资源包括：

> Mozilla developers network
> Web Platform

总结

以上是内存溢出为你收集整理的使用HTML中的SVG绘制新月全部内容，希望文章能够帮你解决使用HTML中的SVG绘制新月所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1052547.html