使用HTML中的SVG绘制新月 [英] Draw a crescent moon using SVG in HTML
问题描述
是否可以使用SVG在HTML中绘制新月？
我一直在尝试在。这可能是一个更好的方法。
<！DOCTYPE html&
< html>
< body>
< h1>我的第一个SVG< / h1>
< svg xmlns =http://www.w3.org/2000/svgversion =1.1>
< circle cx =100cy =50r =40stroke =blackstroke-width =2fill =red/&
< circle cx =115cy =50r =30stroke =blackstroke-width =2fill =white/>
< circle cx =130cy =50r =23stroke =whitestroke-width =2fill =white/>
< / svg>
< / body>
< / html>
注意：W3Schools不是真正应该依赖的参考。它充满了错误的信息和过时的东西。更好的资源包括：
Is it possible to draw a crescent moon using SVG in HTML? I've been trying things out at W3 Schools but I don't see an example of this. I don't need any of the shading that you see in typical google images of 'crescent moon', just a solid border crescent moon.
Please note that my solution might not be the best. I am not an expert when it comes to vector graphics and you should definitely look for other solution
The approach I took is to draw another image with the same background. It will look like:
To Eliminate the extra border I draw another circle above it
Now Set the 3rd image border to white it will look like:
If you are not using borders you only need to use 2 circles
You might also wanna take a look at clipping and masking. It might be a better approach.
<!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>
Side note : W3Schools isn't really the reference you should be relying on. It's full of wrong information and outdated stuff. Better resources include:
这篇关于使用HTML中的SVG绘制新月的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
