资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用svg的path来绘画扇形-创新互联

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
有关于svg的概念不需要讲解太多,需要查看更多,请点击svg百度,先来看看如何使用path来绘画扇形。
1、第一步需要添加标签


2、第二步添加标签

参数:
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来绘画扇形

创新互联公司是一家专注于网站设计、成都网站设计与策划设计,佛坪网站建设哪家好?创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:佛坪等地区。佛坪做网站价格咨询:028-86922220

使用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);

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:使用svg的path来绘画扇形-创新互联
文章源于:http://cdkjz.cn/article/dhgsis.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220