温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用SVG画圆形

发布时间:2021-09-06 14:50:16 来源:亿速云 阅读:206 作者:小新 栏目:web开发

小编给大家分享一下如何使用SVG画圆形,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

SVG  <circle> 元素是一个SVG的基本形状,用来创建圆,基于一个圆心和一个半径,同时可以利用stroke和fill属性对圆进行实线描边,虚线描边以及圆形的颜色填充等。

一、绘制圆形

1. SVG 命名空间

# xmlns="http://www.w3.org/2000/svg" # xmlns:xlink="http://www.w3.org/1999/xlink"

这是XML链接语言[(XLink)规范中定义的XML命名空间。有关 XML 的信息,请参阅可扩展[标记语言 (XML) 1.0 规范。

2. SVG <circle>元素用于绘制圆。

<!DOCTYPE html> <html> <title>项目</title>  <body style="background-color: aqua;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <circle cx="60" cy="60" r="26" style="stroke:#006600; fill:#FF0000" />  </svg> </body> </html>

运行结果:

如何使用SVG画圆形

该圆以点cx , cy为圆心,半径为r。cx,cy 和r是<circle>元素的属性。

二、圆形描边

使用SVG stroke样式属性设置SVG圆的笔触(轮廓)。

笔划设置为#006600深绿色。但是,不仅可以设置笔触颜色,还可以设置更多。还可以使用stroke-widthstyle属性设置笔触宽度 。

示例

<svg height="80px"> <circle cx="40" cy="40" r="24" style="stroke:#006600;      stroke-width: 3;      fill:#FF0000"

运行后圆圈的外观:

如何使用SVG画圆形

可以使用stroke-dasharray属性以虚线绘制边框。

<svg height="80px"><circle cx="40" cy="40" r="24"    style="stroke:#006600;           stroke-width: 3;           stroke-dasharray: 10 5;           fill:#FF0000"/> </svg>

渲染后的外观 :

如何使用SVG画圆形

删除圆的边框(轮廓),仅用填充颜色填充圆。

<svg height="80px"><circle cx="40" cy="40" r="24"    style="stroke: none;           fill:#FF0000"/> </svg>

没有边框的圆运行后效果如下:

如何使用SVG画圆形

三、Circle 填充

该fill样式属性控制圈的填充方式。通过将fill属性设置为,可以选择完全不填充none。示例如下:

<svg height="80px"><circle cx="40" cy="40" r="24"    style="stroke: #660066;           fill: none"/> </svg>

这是没有填充的圆的外观

如何使用SVG画圆形

使用fill 属性设置填充颜色。

代码如下:

<svg height="80px"><circle cx="40" cy="40" r="24"    style="stroke: #660066;           fill: #FF0000"/> </svg>

绘制圆并填充颜色的外观如下:

如何使用SVG画圆形

使用fill-opacity style属性将填充设置为透明。以下示例绘制了两个圆,一个圆部分位于另一个圆的上方,并且是半透明的。

<svg height="80px">    <circle cx="40" cy="40" r="24" style="stroke: #660000;                   fill: #cc0000;            "></circle>    <circle cx="64" cy="40" r="24" style="stroke: #000099;                   fill: #0000cc;                   fill-opacity: 0.5;            "></circle> </svg>

运行效果如下:

如何使用SVG画圆形

蓝色(右)圆圈现在在内部是半透明的。要使笔划也为半透明,则必须使用stroke-opacitystyle属性。

以上是“如何使用SVG画圆形”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

svg
AI