您好,登錄后才能下訂單哦!
可縮放矢量圖形是基于可擴展標記語言(標準通用標記語言的子集),用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定,是一個開放標準。
有關于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"。
顯示圖:
使用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);
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。