SVG绘制圆形简单示例分享

Stella981
• 阅读 729

今天分享“svg绘制圆形”部分

1、简单圆形

效果图如下:

SVG绘制圆形简单示例分享

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="40" cy="40" r="40"></circle></svg>

代码解析:

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0);

r属性定义圆的半径

2、圆形填充颜色及边框

效果图如下:

SVG绘制圆形简单示例分享

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="45" cy="45" r="40" stroke-width="3" stroke="blue" fill="red"></circle></svg>

代码解析:

fill 属性定义圆形的填充颜色(rgb 值、颜色名或者十六进制值);

stroke-width 属性定义圆形边框的宽度;

stroke 属性定义圆形边框的颜色

好了今天的分享这里结束,我也是一边学习一边分享的,若有错误的地方请大家指正,下次分享“svg绘制椭圆”部分,希望大家届时来浏览,谢谢大家。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
java反射, 不看你可别后悔
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Easter79 Easter79
3年前
SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分1、简单圆形效果图如下:!(http://static.oschina.net/uploads/space/2016/0223/221143_UhEK_2619189.png)关键代码:<svg xmlns"http://www.w3.org/2000/svg" version"1.1
Stella981 Stella981
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Stella981 Stella981
3年前
Native memory allocation (mmap) failed to map xxx bytes for committing reserved memory
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
3年前
Spring Boot 2下使用Feign找不到@EnableFeignClients的解决办法
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2
Wesley13 Wesley13
3年前
Java8中的LocalDateTime工具类
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Easter79 Easter79
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Easter79 Easter79
3年前
SVG绘制矩形简单示例分享
最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分1、简单矩形效果图如下:!(http://static.oschina.net/uploads/space/2016/0222/213915_Umuu_2619189.png)关键代码:<svg
Stella981 Stella981
3年前
SVG绘制矩形简单示例分享
最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分1、简单矩形效果图如下:!(http://static.oschina.net/uploads/space/2016/0222/213915_Umuu_2619189.png)关键代码:<svg