This component is used to parse the path character string of a command description. Actually, it parses an SVG path. When configuring the marquee text effect, you can use the pathname parameter to reference the path. Note that <Marquee> must follow <PathUtil>. In the command description of a path, uppercase letters indicate an absolute position and lowercase letters indicate a relative position.
Parameter | Type | Mandatory | Description |
|---|---|---|---|
name | String | Yes | Path name. |
path | String | Yes | SVG command description of a path. The value starts with an SVG command and the command is followed by specific parameters. The command and parameters can be separated by spaces, commas (,), or no character. Parameters can be separated by spaces, commas (,), or line feed. |
SVG commands in a path
Command | Parameter | Description |
|---|---|---|
M,m | x,y | Moves the drawing point to (x,y) and starts to draw. |
L,l | x,y | Draws a straight line from the current drawing point of a path to (x,y) and moves the drawing point to (x,y). |
H,h | x | Draws a horizontal line from the current drawing point of a path to the point x and moves the drawing point to (x,y). |
V,v | y | Draws a vertical line from the current drawing point of a path to the point x and moves the drawing point to (x,y). |
Z,z | N/A | Uses a straight line to connect the current drawing point to the start drawing point of the M command. |
Q,q | x1,y1,x,y | Draws a quadratic Bezier curve from the current drawing point to (x,y), sets the control point to (x1,y1), and moves the drawing point to (x,y). |
T,t | x,y | Draws a quadratic Bezier curve from the current drawing point of a path to (x,y) and moves the drawing point to (x,y). If the previous command is Q or T, the control point is a symmetric point of the previous control point with respect to the end point of the previous command. If the previous command is not Q or T, the control point is the same as the end point. |
C,c | x1,y1,x2,y2,x,y | Draws a cubic Bezier curve from the current drawing point of a path to (x,y), sets control points 1 and 2 to (x1,y1) and (x2,y2) respectively, and moves the drawing point to (x,y). |
S,s | x2,y2,x,y | Draws a quadratic Bezier curve from the current drawing point of a path to (x,y) and moves the drawing point to (x,y). If the previous command is C or S, control point 1 is a symmetric point of the previous control point 2 with respect to the end point of the previous command. If the previous command is not C or S, control point 1 is the same as control point 2. |
A,a | rx,ry,x-axis-rotation,large-arc-flag,sweep-flag,x,y | Draws an arc. The rx and ry parameters respectively indicate the radius along the X axis and that along the Y axis. The x-axis-rotation parameter indicates the arc rotation. The large-arc-flag parameter indicates whether the arc angle is less than 180 degrees and its options are 0 (yes) and 1 (no). The sweep-flag parameter indicates the direction in which an arc is drawn. The value 0 indicates that the arc is drawn counterclockwise from the start point to the end point. The value 1 indicates that the arc is drawn clockwise from the start point to the end point. |
Parsing commands for basic figures
In addition to SVG commands, the following commands are added to parse paths of basic figures, including rounded rectangles, arcs (or ellipses), circles, and hearts. The following commands cannot be used together with the SVG commands.
Command | Parameter | Description |
|---|---|---|
Rect | left,top,right,bottom,rx,ry,direction | Draws a rounded rectangle. The left, top, right, and bottom parameters indicate the left side (x coordinate), top side (y coordinate), right side (x coordinate), and bottom side (y coordinate) of the rectangle respectively. The rx and ry parameters indicate the radiuses of the rounded corner along the X axis and Y axis. The direction parameter indicates the direction in which the rounded rectangle is drawn and its options are 0 (clockwise) and 1 (counterclockwise). |
Circle | x,y,r,direction | Draws a circle. The x and y parameters indicate coordinates of the circle center. The r parameter indicates the radius. The direction parameter indicates the direction in which the circle is drawn and its options are 0 (clockwise) and 1 (counterclockwise). |
Arc | left,top,right,bottom,startAngle,sweepAngle | Draws an arc or ellipse. The left, top, right, and bottom parameters indicate the left side (X coordinate), top side (Y coordinate), right side (X coordinate), and bottom side (Y coordinate) of the rectangle in which the arc or ellipse is drawn. The startAngle parameter indicates the start angle for drawing the arc or ellipse. The sweepAngle parameter indicates the angle for drawing the arc or ellipse. The start point is the middle point on the right side of the rectangle, and the arc or ellipse is drawn in clockwise direction. |
Love | N/A | Draws a heart. The coordinates, w, and h of the heart are always (200,130), 200, and 170 respectively. |
Example 1: Generate a path named love. Set coordinates of the upper left corner to (200,130), w to 200, and h to 170. When implementing the marquee text effect, use the pathname parameter to reference the path.
<PathUtil name="love" path="love"/>
Example 2: Generate a rounded rectangle path with the x coordinate of the left side being 0, x coordinate of the top side being 0, x coordinate of the right side being 100, x coordinate of the bottom side being 100, and radiuses of the rounded corner along both the X and Y axises being 15.
<PathUtil name="rect" path="Rect 0,0,100,100,15,15,0"/>
Example 3: Generate a circle path with the x coordinate, y coordinate, and radius being 100.
<PathUtil name="circle" path="Circle 100,100,100,0"/>
Example 4: Generate an ellipse path with the x coordinate of the left side, y coordinate of the top side, x coordinate of the right side, and y coordinate of the bottom side of the rectangle in which the ellipse is drawn being 100, 100, 300, and 400 respectively. In this case, the ellipse height along the Y axis and width along the X axis are respectively 300 and 200, which can be calculated based on the x and y coordinates. Ensure that the path is drawn 360 degrees clockwise starting from the rightmost point, with the rectangle center as the rotation center.
<PathUtil name="Arc" path="Arc 100,100,300,400,0,360"/>
Example 5: Generate a path based on the path plan. The C commands connect and move drawing points based on the cubic Bezier curve. The Z commands connect drawing points and initial drawing points to form a closed path. The M commands move drawing points and set them as initial drawing points. The path generated is a stroke path of the four Chinese characters indicating Happy New Year. It is generated by GIMP after image cutout.
<PathUtil name="d" path="M 0.00,0.00
C 0.00,0.00 0.00,178.00 0.00,178.00
0.00,178.00 418.00,178.00 418.00,178.00
418.00,178.00 418.00,0.00 418.00,0.00
418.00,0.00 0.00,0.00 0.00,0.00 Z
M 68.02,18.34
C 72.55,17.82 75.53,17.69 78.77,21.47
82.61,25.93 80.10,31.06 75.98,32.05
69.92,33.51 56.15,22.09 68.02,18.34 Z
M 362.00,31.00
C 362.00,31.00 352.00,29.00 352.00,29.00
348.89,35.59 344.64,37.48 340.56,43.00
337.52,47.10 337.06,50.69 334.64,55.00
333.50,57.04 331.22,59.82 330.84,62.00
330.51,63.88 331.43,66.09 331.75,68.00
332.80,74.21 333.83,85.23 341.01,87.83
345.45,89.44 347.05,84.20 347.79,81.00
350.53,69.04 347.66,68.13 347.00,58.00
355.79,60.74 351.11,65.66 352.80,72.00
353.92,76.20 356.47,78.67 359.00,82.00
361.78,79.09 367.22,72.67 371.00,71.64
375.82,70.33 382.28,76.08 381.39,81.01
379.98,88.75 367.27,98.51 365.02,103.00
363.33,106.38 364.01,119.52 364.00,124.00
363.98,133.49 362.58,134.22 355.07,139.58
352.99,141.07 350.34,143.82 347.62,141.99
345.26,140.40 344.46,136.35 344.18,133.72
344.18,133.72 343.30,123.00 343.30,123.00
343.38,119.72 344.71,115.28 343.30,112.11
341.05,106.40 335.76,109.91 328.00,104.36
319.34,98.18 315.12,86.35 315.00,76.00
314.88,64.75 315.94,65.94 318.86,56.00
318.86,56.00 322.83,41.04 322.83,41.04
326.16,34.47 331.39,31.00 336.83,26.53
340.05,23.88 342.68,21.07 346.99,20.43
349.90,19.45 352.21,20.38 355.09,20.43
355.09,20.43 360.72,20.43 360.72,20.43
364.19,21.48 369.66,26.68 370.77,30.04
372.05,33.86 373.85,46.80 366.05,44.34
360.93,42.73 362.00,35.20 362.00,31.00 Z
M 187.00,44.00
C 181.43,45.37 175.73,45.99 170.00,46.00
166.63,46.01 162.00,45.46 159.60,48.31
156.66,51.81 158.43,61.68 159.00,66.00
162.38,65.55 170.09,64.82 172.42,62.44
174.48,60.32 174.25,56.32 176.49,55.17
179.12,53.82 180.93,57.05 181.66,59.02
184.23,65.89 185.98,70.58 186.00,78.17
187.80,78.02 190.26,77.98 191.98,78.17
194.29,78.83 196.34,79.78 197.22,82.13
199.43,88.05 192.54,92.16 189.14,95.51
187.84,96.79 186.78,97.91 186.81,99.85
186.81,99.85 189.71,108.00 189.71,108.00
191.27,114.95 191.01,120.03 191.00,127.00
191.00,130.08 191.20,134.06 189.55,136.77
187.15,140.70 178.78,141.31 175.98,137.57
173.16,133.79 174.09,119.20 174.00,114.00
173.74,100.16 164.42,109.97 152.00,110.40
149.70,110.48 145.29,109.97 144.17,107.57
142.11,103.20 151.31,99.35 153.03,95.83
154.38,93.04 152.45,90.82 152.35,87.00
152.35,87.00 154.00,72.00 154.00,72.00
151.29,71.63 146.72,71.19 144.70,69.27
139.00,63.84 142.36,46.19 148.18,41.82
153.93,37.50 155.92,42.66 159.17,43.12
159.17,43.12 169.00,40.58 169.00,40.58
176.01,39.09 184.39,33.80 187.00,44.00 Z
M 233.00,38.00
C 237.78,44.71 236.58,50.52 237.09,58.00
237.09,58.00 238.00,68.00 238.00,68.00
238.00,68.00 238.00,104.00 238.00,104.00
238.00,104.00 236.17,128.00 236.17,128.00
234.35,147.06 236.21,152.07 227.00,170.00
224.05,167.19 222.33,165.18 222.05,160.96
221.82,157.47 223.47,141.88 224.20,138.00
224.20,138.00 227.92,111.00 227.92,111.00
229.11,104.43 231.07,103.99 231.03,100.56
231.03,100.56 230.04,93.00 230.04,93.00
230.04,93.00 231.72,51.00 231.72,51.00
232.23,46.65 231.37,42.10 233.00,38.00 Z
M 94.00,40.00
C 101.03,50.11 91.58,50.28 89.55,59.00
88.65,62.85 90.96,65.17 90.51,69.00
90.51,69.00 88.01,77.00 88.01,77.00
88.01,77.00 88.01,90.00 88.01,90.00
88.01,90.00 86.65,96.00 86.65,96.00
85.72,102.37 93.89,109.47 92.16,114.82
90.64,119.49 79.96,122.15 76.60,127.10
72.33,133.39 84.16,142.56 73.96,145.89
64.19,149.08 62.17,133.81 59.69,131.51
57.05,129.06 51.57,128.88 48.00,128.00
51.49,119.61 54.08,122.06 59.82,117.37
63.13,114.65 69.32,105.21 70.00,101.00
70.00,101.00 57.00,100.00 57.00,100.00
59.89,95.05 68.58,93.30 74.00,91.00
74.00,91.00 74.00,89.00 74.00,89.00
63.67,85.29 62.85,81.75 60.00,72.00
66.56,75.90 66.32,83.43 71.05,83.91
74.08,84.21 78.36,80.82 79.12,77.96
79.62,76.06 79.03,65.89 77.98,64.31
76.25,61.73 72.73,62.02 70.00,62.00
70.00,62.00 54.00,62.69 54.00,62.69
51.68,62.24 46.50,59.23 44.00,58.00
44.00,58.00 59.00,53.01 59.00,53.01
59.00,53.01 65.00,49.45 65.00,49.45
65.00,49.45 80.00,41.84 80.00,41.84
80.00,41.84 94.00,40.00 94.00,40.00 Z
M 270.00,142.00
C 264.26,136.19 268.17,129.17 264.41,125.72
261.37,122.93 253.41,124.89 253.34,120.75
253.29,118.14 257.16,115.15 259.00,113.66
266.35,107.74 279.37,98.86 270.84,88.76
268.79,86.33 268.17,85.42 265.00,85.00
267.52,75.73 274.57,74.09 275.77,67.00
276.44,63.05 273.92,56.09 277.47,54.17
279.26,53.20 280.71,54.80 281.64,56.15
284.00,59.59 284.06,64.50 287.39,67.28
291.08,70.34 298.30,69.51 301.69,72.56
303.98,74.62 303.94,77.16 304.00,80.00
304.00,80.00 302.69,101.91 302.69,101.91
301.21,107.33 289.48,111.53 285.28,116.18
281.71,120.13 281.97,125.33 279.81,130.00
277.60,134.80 273.67,138.32 270.00,142.00 Z
M 221.00,65.00
C 223.33,72.19 225.52,88.10 222.28,95.00
221.03,97.65 218.06,103.66 215.79,105.25
210.88,108.70 207.34,105.17 207.04,100.00
206.85,96.68 207.14,92.03 208.93,89.17
210.57,86.55 213.43,85.00 214.98,81.99
214.98,81.99 219.00,65.00 219.00,65.00
219.00,65.00 221.00,65.00 221.00,65.00 Z
M 118.00,69.00
C 114.73,75.55 111.50,78.37 113.00,86.00
113.00,86.00 133.00,76.25 133.00,76.25
133.00,76.25 141.00,80.00 141.00,80.00
136.58,86.86 124.80,87.46 118.15,93.53
111.83,99.28 117.38,109.19 113.69,114.49
111.22,118.02 105.13,116.70 102.99,113.47
101.76,111.60 102.00,108.20 102.00,106.00
101.99,99.80 101.23,87.17 103.98,82.00
105.07,79.94 107.03,77.88 108.49,76.00
112.07,71.38 111.85,69.49 118.00,69.00 Z
M 168.01,71.74
C 161.47,75.34 161.16,80.25 162.90,87.00
163.81,90.51 165.48,94.62 169.99,93.21
174.12,91.91 174.55,88.43 175.85,85.00
176.48,83.35 178.06,80.57 178.15,79.00
178.45,73.44 172.85,70.72 168.01,71.74 Z
M 246.00,91.00
C 253.45,90.26 255.18,94.10 254.98,101.00
254.86,104.93 252.99,109.65 248.13,108.16
241.89,106.29 248.03,102.05 248.13,98.95
248.27,97.23 246.56,93.01 246.00,91.00 Z
M 131.00,99.00
C 133.28,107.07 138.99,117.39 134.55,125.96
133.40,128.18 129.21,133.26 126.30,132.30
123.08,131.24 122.99,125.70 123.29,123.00
124.38,113.10 125.65,107.56 131.00,99.00 Z
M 292.33,114.64
C 300.35,113.42 312.21,122.36 307.97,128.44
307.09,129.71 304.40,130.85 303.00,131.57
301.76,132.21 300.39,133.06 299.02,133.34
297.39,133.67 296.03,133.44 294.81,132.26
292.88,130.39 289.87,118.81 290.77,116.31
291.27,114.90 292.05,114.88 292.33,114.64 Z
M 384.17,118.87
C 394.20,119.95 396.44,137.61 385.00,139.13
380.67,139.70 376.83,135.03 376.64,131.00
376.44,126.44 380.29,120.85 384.17,118.87 Z
M 325.79,121.17
C 333.23,124.76 333.03,141.36 323.00,143.11
318.24,143.93 314.25,141.03 314.71,136.00
315.22,130.55 320.26,122.10 325.79,121.17 Z
M 86.17,124.17
C 87.96,124.01 91.13,123.95 92.98,124.17
103.95,126.69 93.93,142.41 87.85,133.85
87.04,132.71 86.62,131.35 86.17,130.00
85.98,128.22 86.02,125.83 86.17,124.17 Z
M 20.00,139.00
C 21.25,140.51 23.88,144.06 25.37,144.98
32.86,149.58 46.76,140.71 54.00,139.00
51.19,144.23 40.22,154.45 34.00,154.57
31.90,154.61 29.93,153.61 28.00,152.93
28.00,152.93 22.06,150.84 22.06,150.84
17.38,148.13 17.01,143.06 20.00,139.00 Z"/>