[READ-ONLY] Mirror of https://github.com/thoda-dev/svg-lua. svg lua library
version 1.0.0
Simplfying usage by adding all direct add method
+153
-12
+122
-3
README.md
+122
-3
README.md
···
12
12
13
13
Check the `package.path` documentation for more information about it.
14
14
15
+
### normal usage to draw a complete svg
16
+
15
17
```lua
16
18
mon_dessin = svg:create()
17
-
mon_dessin:add(mon_dessin:Rect())
19
+
mon_dessin:addRect()
18
20
mon_dessin:draw()
19
21
```
20
22
···
26
28
</svg>
27
29
```
28
30
31
+
You can modify an existing element and add it several times in the same drawing:
32
+
33
+
```lua
34
+
mon_dessin = svg:create()
35
+
rectangle = mon_dessin.Rect()
36
+
mon_dessin:add(rectangle)
37
+
rectangle.x = 20
38
+
rectangle.y = 20
39
+
mon_dessin.add(rectangle)
40
+
mon_dessin.draw()
41
+
```
42
+
43
+
result for `print(mon_dessin:draw())` :
44
+
45
+
```html
46
+
<svg width="100" height="100" fill="transparent" stroke="#000000" version="1.1" xmlns="http://www.w3.org/2000/svg">
47
+
<rect y="10" x="10" stroke-width="1" height="10" width="10" rx="0" ry="0" />
48
+
<rect y="20" x="20" stroke-width="1" height="10" width="10" rx="0" ry="0" />
49
+
</svg>
50
+
```
51
+
52
+
### using the lib to generate only elements, without the global `<svg>`
53
+
54
+
all svg elements are composed with these properties:
55
+
56
+
- name : the type of element (rect, text, polyline, ...)
57
+
- content : if the elements have a content (eg: the text content for `<text></text>`)
58
+
- strElement : the complete element, with all the parmaters, rendered as a svg string
59
+
- all other option : all the element options that are present in svg (eg: x, y, height, width, ...)
60
+
61
+
you can use the strElement option to get the svg formated string and use it as you want.
62
+
63
+
```lua
64
+
mon_dessin = svg:create()
65
+
rectangle = mon_dessin:Rect()
66
+
```
67
+
68
+
result for `print(rectangle.strElement)` :
69
+
70
+
```html
71
+
<rect y="10" x="10" stroke-width="1" height="10" width="10" rx="0" ry="0" />
72
+
```
73
+
29
74
### testing
30
75
31
76
can be tested [here](https://www.jdoodle.com/execute-lua-online)
···
58
103
- stroke: string => lines color, default to "#000000"
59
104
- fill: string => fill color, default to "transparent"
60
105
106
+
**svg:addText(text, x, y, style, transform)** *add text*
107
+
108
+
- text: string => the text to write
109
+
- x: number => Horizontal position, default to 10
110
+
- y: number => Vertical position, default to 50
111
+
- style: string => style of the text (css with svg params), default to:
112
+
* `font-family: Verdana`
113
+
* `font-size: 10`
114
+
* `stroke: self.stroke` svg:create() parameter ("#000000" by default)
115
+
* `fill: self.fill` svg:create() parameter ("transparent" by default)
116
+
- tranform: string => transformation options (eg: rotation)
117
+
118
+
**svg:addRect(x, y, width, height, stroke, strokeWidth, fill, rx, ry, transform)** *add a rectangle*
119
+
120
+
- x: number => Horizontal position from top left corner, default to 10
121
+
- y: number => Vertical position from top left corner, default to 10
122
+
- width: number => Width of the rectangle, default to 10
123
+
- height: number => Height of the rectangle, default to 10
124
+
- stroke: string => lines color, default to svg:create() parameter ("#000000" by default)
125
+
- strokeWidth: string => lines width, default to 1
126
+
- fill: string => fill color, default to svg:create() parameter ("transparent" by default)
127
+
- rx: number => Horizontal raduis of the corners, default to 0
128
+
- ry: number => Vertical radius of the corners, default to 0
129
+
- tranform: string => transformation options (eg: rotation)
130
+
131
+
**svg:addCircle(r, cx, cy, stroke, strokeWidth, fill, transform)** *add a circle*
132
+
133
+
- r: number => circle radius, default to 25
134
+
- cx: number => Horizontal position of the center, default to 30
135
+
- cy: number => Vertical position of the center, default to 30
136
+
- stroke: string => lines color, default to svg:create() parameter ("#000000" by default)
137
+
- strokeWidth: string => lines width, default to 1
138
+
- fill: string => fill color, default to svg:create() parameter ("transparent" by default)
139
+
- tranform: string => transformation options (eg: rotation)
140
+
141
+
**svg:addEllipse(cx, cy, rx, ry, stroke, strokeWidth, fill, transform)** *add an ellipse*
142
+
143
+
- cx: number => Horizontal position of the center, default to 30
144
+
- cy: number => Vertical position of the center, default to 30
145
+
- rx: number => Horizontal radius of the ellipse, default to 25
146
+
- ry: number => Vertical radius of the ellipse, default to 15
147
+
- stroke: string => lines color, default to svg:create() parameter ("#000000" by default)
148
+
- strokeWidth: string => lines width, default to 1
149
+
- fill: string => fill color, default to svg:create() parameter ("transparent" by default)
150
+
- tranform: string => transformation options (eg: rotation)
151
+
152
+
**svg:addLine(x1, y1, x2, y2, stroke, strokeWidth, fill)** *add a line*
153
+
154
+
- x1: number => Horizontal position of the center, default to 30
155
+
- y1: number => Vertical position of the center, default to 30
156
+
- x2: number => Horizontal radius of the ellipse, default to 25
157
+
- y2: number => Vertical radius of the ellipse, default to 15
158
+
- stroke: string => lines color, default to svg:create() parameter ("#000000" by default)
159
+
- strokeWidth: string => lines width, default to 1
160
+
- fill: string => fill color, default to svg:create() parameter ("transparent" by default)
161
+
162
+
**svg:addPolyline(points, stroke, strokeWidth, fill, transform)** *add a polyline*
163
+
164
+
- points: string => all the points of the polyline with the standard svg format "x1,y1 x2,y2 x3,y3 ..."
165
+
- stroke: string => lines color
166
+
- strokeWidth: string => lines width
167
+
- fill: string => fill color
168
+
- tranform: string => transformation options (eg: rotation)
169
+
170
+
**svg:addPath(d, stroke, strokeWidth, fill, transform)** *add a path*
171
+
172
+
- d: string => standard svg parameters
173
+
- stroke: string => lines color
174
+
- strokeWidth: string => lines width
175
+
- fill: string => fill color
176
+
- tranform: string => transformation options (eg: rotation)
177
+
61
178
**svg:add(element)** *add an element to the drawing*
62
179
63
180
- element: svg.Element => see farther for element list
64
181
65
182
**svg:draw()** *return the svg formated string*
66
183
67
-
### Elements for svg:add(element)
184
+
### Elements for svg:add(element) or elements rendering only
68
185
69
186
**svg:Text(text, x, y, style, transform)** *add text*
70
187
···
128
245
- stroke: string => lines color
129
246
- strokeWidth: string => lines width
130
247
- fill: string => fill color
248
+
- tranform: string => transformation options (eg: rotation)
131
249
132
250
**svg:Path(d, stroke, strokeWidth, fill, transform)** *add a path*
133
251
134
252
- d: string => standard svg parameters
135
253
- stroke: string => lines color
136
254
- strokeWidth: string => lines width
137
-
- fill: string => fill color
255
+
- fill: string => fill color
256
+
- tranform: string => transformation options (eg: rotation)
+1
-1
package.json
+1
-1
package.json
+1
-1
svg-min.lua
+1
-1
svg-min.lua
···
1
-
svg={}svg.__index=svg;function svg:create(a,b,c,d)local e={}setmetatable(e,svg)e.width=a or 100;e.height=height or 100;e.stroke=c or"#000000"e.fill=d or"transparent"e.elements={}e.Element={}e.Element.__index=svg.Element;function e.Element:create(f,g,h)local i={}setmetatable(i,e.Element)i.name=f;i.strElement="<"..f.." "for j,k in pairs(g)do i[j]=k;i.strElement=i.strElement..j.."=\""..k.."\" "end;if h~=nil then i.strElement=i.strElement..">"..h.."</"..f..">"else i.strElement=i.strElement.."/>"end;return i end;return e end;function svg:add(l)table.insert(self.elements,l)end;function svg:draw()local m="<svg width=\""..self.width.."\" height=\""..self.height.."\" fill=\""..self.fill.."\" stroke=\""..self.stroke.."\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">"for n,o in pairs(self.elements)do m=m..o.strElement end;m=m.."</svg>"return m end;function svg:Text(p,q,s,t,u)return self.Element:create("text",{x=q or 10,y=s or 50,style=t or"font-family: Verdana; font-size: 10; stroke: "..self.stroke.."; fill: "..self.fill..";",transform=u or""},p)end;function svg:Rect(q,s,a,height,c,v,d,w,x,u)return self.Element:create("rect",{x=q or 10,y=s or 10,width=a or 10,height=height or 10,stroke=c or self.stroke,fill=d or self.fill,["stroke-width"]=v or 1,rx=w or 0,ry=x or 0,transform=u or""})end;function svg:Circle(r,cx,cy,c,v,d,u)return self.Element:create("circle",{r=r or 25,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:Ellipse(cx,cy,w,x,c,v,d,u)return self.Element:create("ellipse",{rx=r or 25,ry=r or 15,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:Line(y,z,A,B,c,v,d)return self.Element:create("line",{x1=r or 15,y1=r or 15,x2=cx or 50,y2=cy or 45,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill})end;function svg:Polyline(C,c,v,d,u)return self.Element:create("polyline",{points=C or"10,10 50,50 50,25 75,25",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:Path(D,c,v,d,u)return self.Element:create("path",{d=D or"M50 0 L75 100 L25 100 Z",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end
1
+
svg={}svg.__index=svg;function svg:create(a,b,c,d)local e={}setmetatable(e,svg)e.width=a or 100;e.height=height or 100;e.stroke=c or"#000000"e.fill=d or"transparent"e.elements={}e.Element={}e.Element.__index=svg.Element;function e.Element:create(f,g,h)local i={}setmetatable(i,e.Element)i.name=f;i.strElement="<"..f.." "for j,k in pairs(g)do i[j]=k;i.strElement=i.strElement..j.."=\""..k.."\" "end;if h~=nil then i.strElement=i.strElement..">"..h.."</"..f..">"else i.strElement=i.strElement.."/>"end;return i end;return e end;function svg:add(l)table.insert(self.elements,l)end;function svg:draw()local m="<svg width=\""..self.width.."\" height=\""..self.height.."\" fill=\""..self.fill.."\" stroke=\""..self.stroke.."\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">"for n,o in pairs(self.elements)do m=m..o.strElement end;m=m.."</svg>"return m end;function svg:Text(p,q,s,t,u)return self.Element:create("text",{x=q or 10,y=s or 50,style=t or"font-family: Verdana; font-size: 10; stroke: "..self.stroke.."; fill: "..self.fill..";",transform=u or""},p)end;function svg:addText(p,q,s,t,u)self:add(self:Text(p,q,s,t,u))end;function svg:Rect(q,s,a,height,c,v,d,w,x,u)return self.Element:create("rect",{x=q or 10,y=s or 10,width=a or 10,height=height or 10,stroke=c or self.stroke,fill=d or self.fill,["stroke-width"]=v or 1,rx=w or 0,ry=x or 0,transform=u or""})end;function svg:addRect(q,s,a,height,c,v,d,w,x,u)self:add(self:Rect(q,s,a,height,c,v,d,w,x,u))end;function svg:Circle(r,cx,cy,c,v,d,u)return self.Element:create("circle",{r=r or 25,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addCircle(r,cx,cy,c,v,d,u)self:add(self:Circle(r,cx,cy,c,v,d,u))end;function svg:Ellipse(cx,cy,w,x,c,v,d,u)return self.Element:create("ellipse",{rx=r or 25,ry=r or 15,cx=cx or 30,cy=cy or 30,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addEllipse(cx,cy,w,x,c,v,d,u)self:add(self:Ellipse(cx,cy,w,x,c,v,d,u))end;function svg:Line(y,z,A,B,c,v,d)return self.Element:create("line",{x1=r or 15,y1=r or 15,x2=cx or 50,y2=cy or 45,stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill})end;function svg:addLine(y,z,A,B,c,v,d)self:add(self:Line(y,z,A,B,c,v,d))end;function svg:Polyline(C,c,v,d,u)return self.Element:create("polyline",{points=C or"10,10 50,50 50,25 75,25",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addPolyline(C,c,v,d,u)self:add(self:Polyline(C,c,v,d,u))end;function svg:Path(D,c,v,d,u)return self.Element:create("path",{d=D or"M50 0 L75 100 L25 100 Z",stroke=c or self.stroke,["stroke-width"]=v or 1,fill=d or self.fill,transform=u or""})end;function svg:addPath(D,c,v,d,u)self:add(self:Path(D,c,v,d,u))end
+22
svg.lua
+22
svg.lua
···
74
74
transform = transform or ""
75
75
}, text)
76
76
end
77
+
function svg:addText(text, x, y, style, transform)
78
+
self:add(self:Text(text, x, y, style, transform))
79
+
end
77
80
78
81
-- function to create a rectangle
79
82
-- x: number => Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche
···
99
102
ry = ry or 0,
100
103
transform = transform or ""
101
104
})
105
+
end
106
+
function svg:addRect(x, y, width, height, stroke, strokeWidth, fill, rx, ry, transform)
107
+
self:add(self:Rect(x, y, width, height, stroke, strokeWidth, fill, rx, ry, transform))
102
108
end
103
109
104
110
-- function to create a circle
···
120
126
transform = transform or ""
121
127
})
122
128
end
129
+
function svg:addCircle(r, cx, cy, stroke, strokeWidth, fill, transform)
130
+
self:add(self:Circle(r, cx, cy, stroke, strokeWidth, fill, transform))
131
+
end
123
132
124
133
-- function to create an ellipse
125
134
-- cx: number => Horizontal position of the center
···
142
151
transform = transform or ""
143
152
})
144
153
end
154
+
function svg:addEllipse(cx, cy, rx, ry, stroke, strokeWidth, fill, transform)
155
+
self:add(self:Ellipse(cx, cy, rx, ry, stroke, strokeWidth, fill, transform))
156
+
end
145
157
146
158
-- function ro create a line
147
159
-- c1: number => Horizontal postion for point 1
···
162
174
fill = fill or self.fill
163
175
})
164
176
end
177
+
function svg:addLine(x1, y1, x2, y2, stroke, strokeWidth, fill)
178
+
self:add(self:Line(x1, y1, x2, y2, stroke, strokeWidth, fill))
179
+
end
180
+
165
181
166
182
-- function ro create a polyline
167
183
-- points: string => all the points of the polyline with the standard svg format "x1,y1 x2,y2 x3,y3 ..."
···
177
193
transform = transform or ""
178
194
})
179
195
end
196
+
function svg:addPolyline(points, stroke, strokeWidth, fill, transform)
197
+
self:add(self:Polyline(points, stroke, strokeWidth, fill, transform))
198
+
end
180
199
181
200
-- function ro create a polyline
182
201
-- points: string => all the points of the polyline with the standard svg format "x1,y1 x2,y2 x3,y3 ..."
···
192
211
transform = transform or ""
193
212
})
194
213
end
214
+
function svg:addPath(d, stroke, strokeWidth, fill, transform)
215
+
self:add(self:Path(d, stroke, strokeWidth, fill, transform))
216
+
end
+7
-7
test.lua
+7
-7
test.lua
···
7
7
-- TEST IS STARTING HERE -- YOU CAN MODIFY IT --
8
8
9
9
mon_dessin = svg:create()
10
-
mon_dessin:add(mon_dessin:Text("Hello World !!"))
11
-
mon_dessin:add(mon_dessin:Rect())
12
-
mon_dessin:add(mon_dessin:Circle())
13
-
mon_dessin:add(mon_dessin:Ellipse())
14
-
mon_dessin:add(mon_dessin:Line())
15
-
mon_dessin:add(mon_dessin:Polyline())
16
-
mon_dessin:add(mon_dessin:Path())
10
+
mon_dessin:addText("Hello World !!")
11
+
mon_dessin:addRect()
12
+
mon_dessin:addCircle()
13
+
mon_dessin:addEllipse()
14
+
mon_dessin:addLine()
15
+
mon_dessin:addPolyline()
16
+
mon_dessin:addPath()
17
17
print(mon_dessin:draw())