|
| 1 | +# SVG Path Data Parser |
| 2 | +[Edabit Problem](https://edabit.com/challenge/ysMrKPGby3FXiYtQn) |
| 3 | + |
| 4 | +A `<path>` element can usually be found inside an `<svg>` element and has an attribute **d** that represents the definition of the outline of a shape. |
| 5 | + |
| 6 | +A brief summary about this attribute: |
| 7 | + |
| 8 | +It contains commands (letters) and coordinates (numbers) |
| 9 | +All instructions are expressed as one character (e.g., a moveto is expressed as an **M**). |
| 10 | +Superfluous white space and separators such as commas can be eliminated (e.g., M 10 10 L 20 20 contains unnecessary spaces and could be expressed more compactly as `M10 10L20 20`). |
| 11 | +The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g., you can drop the second L in `M 10 20 L 20 10 L -10 -20` and use `M 10 20 L 20 10 -10 -20` instead). |
| 12 | + |
| 13 | +Your job is to build a parser that will convert this string in an array of commands, where each array element is an object with the `command` letter and an array of `parameters`. |
| 14 | + |
| 15 | +This summary is incomplete but should get you started, for more information please refer to the W3C specification found in the resources tab. |
| 16 | + |
| 17 | +## Examples |
| 18 | + |
| 19 | +```javascript |
| 20 | +pathDataParser("") ➞ [] |
| 21 | + |
| 22 | +pathDataParser("M 0 0") ➞ [{command: 'M', parameters: [0, 0]}] |
| 23 | + |
| 24 | +pathDataParser("M 1 1.5 L 0 1.5 0 0.5 1 0.5 0.5 0 0 0.5 1 1.5 1 0.5 0 1.5" ➞ [ |
| 25 | + {command: "M", parameters: [1, 1.5]}, |
| 26 | + {command: "L", parameters: [0, 1.5, 0, 0.5, 1, 0.5, 0.5, 0, 0, 0.5, 1, 1.5, 1, 0.5, 0, 1.5]} |
| 27 | +] |
| 28 | + |
| 29 | +pathDataParser("M 0,1 h 1 v -1 h 1 v 1 h 1 C 2,1 3,3 1.5,3 C 0,3 1,1 0,1 z" ➞ [ |
| 30 | + {command: "M", parameters: [0, 1]}, |
| 31 | + {command: "h", parameters: [1]}, |
| 32 | + {command: "v", parameters: [-1]}, |
| 33 | + {command: "h", parameters: [1]}, |
| 34 | + {command: "v", parameters: [1]}, |
| 35 | + {command: "h", parameters: [1]}, |
| 36 | + {command: "C", parameters: [2, 1, 3, 3, 1.5, 3]}, |
| 37 | + {command: "C", parameters: [0, 3, 1, 1, 0, 1]}, |
| 38 | + {command: "z", parameters: []} |
| 39 | +] |
| 40 | +``` |
| 41 | + |
| 42 | +## Notes: |
| 43 | + |
| 44 | +- Return an empty array if no commands are found (example #1) |
| 45 | +- The z (or Z) command is the only one without parameters, in this case return an empty array (see last command of example #4) |
| 46 | +- The parameters array contains numbers, not strings, so you'll have to convert them |
| 47 | +- Sometimes numbers can be very compressed to save space, let's look at some examples that might trip you up: |
| 48 | + - Decimal numbers can start with a dot: .4 is the same as 0.4 |
| 49 | + - If a negative number comes after another number, the space is optional: 0-4 is equal to 0 -4 |
| 50 | + - Multiple decimal numbers in a row can be very tricky, remember that a number CAN NOT have more than 1 dot, so this: 1.2.34 is actually 2 different numbers: 1.2 and 0.34 |
| 51 | +- Some examples have commas, some do not, some have multiline strings, some are a single line, remember to take into account all valid cases! Check out the tests tab to find out more. |
| 52 | + |
| 53 | +## By: arindal1 |
| 54 | +***[GitHub](https://github.com/arindal1)*** |
0 commit comments