温馨提示×

温馨提示×

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

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

使用svg的path来绘画扇形

发布时间:2020-06-27 21:23:36 来源:网络 阅读:2778 作者:罗禹 栏目:开发技术

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
有关于svg的概念不需要讲解太多,需要查看更多,请点击svg百度,先来看看如何使用path来绘画扇形。
1、第一步需要添加<svg>标签
<svg xmlns="http://www.w3.org/2000/svg" id="svg_draw" width="300" height="300" baseProfile="full" xmlns:NS1="" NS1:xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1">
</svg>
2、第二步添加<path>标签
<path xmlns="http://www.w3.org/2000/svg" fill="#110099" d="M 150 150 L 103.647 245.106 A 150 100 0 0 0 271.353 208.779 Z" />
参数:
fill是填充的颜色
d:是描述要绘画的事务
在d中,如何是绘画半圆的画,
M x,y其中的x,y表述圆心的坐标
L x1,y1标识从x,y到x1,y1的直线。
A表示绘画扇形
A rx,ry ratation_deg,flag1,flag2,x2,y2
其中rx表示x轴的半径
ry表示y轴的半径
ratation_deg 表示绘画的旋转角度,一般为0,不用,
flag1,flag2表示绘画是按照大,还是按照小,也就是按照顺时针还是逆时针来进行绘画。x2,y2和x,y联成的直线为开始线,按照顺时针或者逆时针进行绘画,当和x,y和x1,y1连成的直线为终结线,绘画结束。z表示绘画的路径要闭合,同时file="none"。
显示图:
使用svg的path来绘画扇形

使用js jquery来进行绘画的话:则
var path = $(document.createElementNS("http://www.w3.org/2000/svg", "path"));
var d = "M" + cx + " " + cy + " " + endSeat.x + " " + endSeat.y + " A" + rx + " " + ry + " 0 0 0 " + startSeat.x + " " + startSeat.y + " z";
var fill = this.data[i].color;
path.attr("d",d);
path.attr("fill",fill);

向AI问一下细节

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

AI