SVG drawing Summary

It is very convenient to use SVG. Although some functions need to be optimized, it is sufficient for general vector graphs. The following example shows a small program for drawing.

Directly access test. SVG in the browser.

1. Test. SVG

<?xml version="1.0" encoding="UTF-8"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload = "init(evt)"><script type="text/javascript" xlink:href="test.js"></script></svg>

2. Test. js content

VaR DATA = {Facebook: {Total: 2900, Titan: 800, fish: 600, Athena: 400, bossv: 500, dream: 600}, Mixi: {Total: 2200, titan: 500, fish: 400, Athena: 500, bossv: 400, dream: 400}, Kaixin: {Total: 1900, Titan: 300, fish: 400, Athena: 400, bossv: 400, dream: 400}, Renren: {Total: 2300, Titan: 300, fish: 400, Athena: 600, bossv: 600, dream: 400}, netlog: {Total: 2100, Titan: 300, fish: 400, Athena: 500, bossv: 500, dream: 400}, Minik: {Total: 1900, Titan: 300, fish: 400, Athena: 500, bossv: 300, dream: 400}, Daum: {Total: 1400, Titan: 300, fish: 400, Athena: 600, bossv: 500, dream: 400}, Tencent: {Total: 1900, Titan: 300, fish: 400, Athena: 300, bossv: 500, dream: 400 }}; var color = {Facebook: {stroke: "red", filledcolor: "red"}, Mixi: {stroke: "# ff9fff", filledcolor: "# ff9fff"}, Kaixin: {stroke: "# ffbf02", filledcolor: "# ffbf02 "}, Renren: {stroke: "# 836fff", filledcolor: "# 836fff"}, netlog: {stroke: "# 48d1cc", filledcolor: "# 48d1cc"}, minik: {stroke: "#00ced1", filledcolor: "#00ced1"}, Daum: {stroke: "#008b00", filledcolor: "#008b00"}, Tencent: {stroke: "# a4d3ee", filledcolor: "# a4d3ee" }}; var svgns = "http://www.w3.org/2000/svg";/** based on the corresponding payment amount, obtain the radius of the expected circle */function getradius (payment) {var pay = parseint (payment); Re Turn parseint (math. SQRT (Pay); // to be modified} function getmax (JSON) {var max = 0; For (var val in JSON) {If (Val> MAX) {max = Val ;}return Max ;}var svgdocument; function getxy (prexy, space, radius, maxradius) {return prexy + space * 2 + radius + maxradius ;} /* draw SVG cicle and append it to the svgdom */function drawcircle (EVT, RX, Ry, radius, stroke, filledcolor) {If (window. svgdocument = NULL) {svgdocument = Evt.tar get. ownerdocument;} var shape = svgdocument. createelementns (svgns, "circle"); shape. setattributens (null, "CX", RX); shape. setattributens (null, "Cy", ry); shape. setattributens (null, "r", radius); shape. setattributens (null, "stroke", stroke); shape. setattributens (null, "fill", filledcolor); svgdocument.doc umentelement. appendchild (SHAPE);}/* draw SVG line and append it to the svgdom */function drawli Ne (EVT, srcx, srcy, disx, DISY, stroke) {If (window. svgdocument = NULL) {svgdocument = evt.tar get. ownerdocument;} var shape = svgdocument. createelementns (svgns, "line"); shape. setattributens (null, "X1", srcx); shape. setattributens (null, "Y1", srcy); shape. setattributens (null, "X2", disx); shape. setattributens (null, "Y2", DISY); shape. setattributens (null, "stroke", stroke); svgdocument.doc umentelement. appendc Hild (SHAPE);}/* draw SVG textnode and append it to the svgdom */function drawtext (EVT, RX, Ry, radius, content) {var fontsize = getfontsize (RADIUS); If (window. svgdocument = NULL) {svgdocument = evt.tar get. ownerdocument;} var shape = svgdocument. createelementns (svgns, "text"); shape. setattributens (null, "X", RX); shape. setattributens (null, "Y", ry); // shape. setattributens (null, "font-size", fontsize); s HAPE. textcontent = content; svgdocument.doc umentelement. appendchild (SHAPE);}/** Based on the radius, maximum peripheral radius, and space. Obtain available coordinates. For balanced distribution, the average allocation method is used here. * Result = [{"X": 10, Y: 20}, {"X": 40, Y: 60}, {"X": 70, Y: 80 }, {"X": 40, Y: 60}]; **/function getcorfromradius (RX, Ry, radius, space, maxradius, sum) {var result = new array (); vaR r = radius + space + maxradius; // The maximum radius of the external circle var Y0 = Ry-R; result. push ({"X": RX, "Y": y0}); var step = (360/SUM) * Math. PI/180; // radian var start = step; For (VAR I = 0; I <sum-1; I ++) {var rxi = parseint (RX + R * Math. sin (start); var ryi = Parseint (ry-R * Math. cos (start); result. push ({"X": rxi, "Y": ryi}); start + = step;} return result;}/** get the font size based on the radius, to be optimized. **/Function getfontsize (RADIUS) {return parseint (radius/2);}/* draw the total platform map circly */function drawplatformcircle (EVT, platcount, gamecount) {var RX = 900; var ry = 450; var radius0 = 200; var Space = 30; var max0 = 70; var res = getcorfromradius (RX, Ry, radius0, space, max0, platcount); var I = 0; For (VAR platform in data) {var rx0 = res [I]. x; var ry0 = res [I]. y; var max = getmax (dat A [platform]); var stroke = color [platform]. stroke; var filledcolor = color [platform]. filledcolor; var radius = getradius (data [platform]. total); // drawcircle (EVT, rx0, ry0, radius, stroke, filledcolor) of the circle radius of the platform; var J = 0; For (var obj in data [platform]) {If (OBJ! = "Total") {var rest = getcorfromradius (rx0, ry0, radius, space, Max, gamecount); var outerx = rest [J]. x; var outery = rest [J]. y; var outerradius = getradius (data [platform] [OBJ]); drawcircle (EVT, outerx, outery, outerradius, stroke, filledcolor); drawline (EVT, rx0, ry0, outerx, outery, stroke); drawtext (EVT, outerx-outerradius/2, outery, outerradius, OBJ); j ++ ;}} drawtext (EVT, rx0-radius/2, ry0, Rad IUS, platform); I ++; }}/ * draw the total platform map in line */function drawlineplatform (EVT) {var rightindex = 80; var Top = 50; vaR Space = 40; var COUNT = 0; var maxtotalgame = 5; For (VAR platform in data) {count ++; var stroke = color [platform]. stroke; var filledcolor = color [platform]. filledcolor; var max = getmax (data [platform]); var radius = getradius (data [platform]. total); // var RX = Getxy (rightindex, space, radius, max); // platform Circular X axis coordinate var ry = getxy (top, space, radius, max ); // drawcircle (EVT, RX, Ry, radius, stroke, filledcolor), var j = 0; For (var obj in data [platform]) {If (OBJ! = "Total") {var res = getcorfromradius (RX, Ry, radius, space, Max, maxtotalgame); var outerx = res [J]. x; var outery = res [J]. y; var outerradius = getradius (data [platform] [OBJ]); drawline (EVT, RX, Ry, outerx, outery, stroke); drawcircle (EVT, outerx, outery, outerradius, stroke, filledcolor); drawtext (EVT, outerx-outerradius/2, outery, outerradius, OBJ); j ++ ;}} drawtext (EVT, RX-radius/2, ry, radius, platform); rightindex = (RX + radius + space * 2 + max); If (count % 5 = 0) {rightindex = 120; top = (RY + radius + space + max) + 50; // todo: The height is not taken into account.} function Init (EVT) {drawplatformcircle (EVT, 8, 5 );}

Generated: