Is there a way we can load an svg file as a javascript object in order to manipulate its element

Phaser 3
1

Hi all, I’m looking for a way to manipulate this svg:

<svg id="Ebene_3" data-name="Ebene 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.96 117.51"><defs><style>.cls-1{fill:#9df74b;}.cls-2{fill:#f3dc42;}.cls-3{fill:#6a2bf9;}.cls-4{fill:#f1d447;}.cls-5{fill:#ce561a;}.cls-6{fill:#d04286;}.cls-7{fill:#0c46df;}.cls-8{fill:#7e00fe;}</style></defs><polygon class="cls-1" points="0.15 0 0.15 29.77 16.15 19 16.15 0 0.15 0"/><polygon class="cls-2" points="16.15 19 23.15 26 31.17 19 33.6 0 16.15 0 16.15 19"/><polygon class="cls-3" points="33.6 0 31.17 19 46.15 17 43.51 0 33.6 0"/><polygon class="cls-4" points="43.51 0 46.15 17 64.15 17 73.01 0 43.51 0"/><polygon class="cls-1" points="73.01 0 64.15 17 67.15 33 85.15 31 89.3 0 73.01 0"/><polygon class="cls-5" points="87.56 13 97.15 22 103.15 17 107.8 0 89.3 0 87.56 13"/><path class="cls-5" d="M759.4,331.56" transform="translate(-651.61 -330.85)"/><polygon class="cls-3" points="107.8 0 113.96 0 113.96 22 103.15 17 107.8 0"/><polygon class="cls-3" points="0.15 29.77 16.15 19 23.15 26 0.15 50.25 0.15 29.77"/><polygon class="cls-6" points="43.51 34.06 46.15 17 64.15 17 67.15 33 43.51 34.06"/><polygon class="cls-7" points="87.56 13 85.15 31 84.15 39 94.48 34.62 97.15 22 87.56 13"/><polygon class="cls-2" points="94.48 34.62 100.15 43 113.96 22 103.15 17 97.15 22 94.48 34.62"/><polygon class="cls-3" points="100.15 43 99.15 59 113.96 56.74 113.96 22 100.15 43"/><polygon class="cls-1" points="19.92 29.41 23.15 26 31.17 19 46.15 17 43.51 34.06 19.92 29.41"/><polygon class="cls-1" points="0 117.51 0 87.74 16 98.51 16 117.51 0 117.51"/><polygon class="cls-2" points="16 98.51 23 91.51 31.03 98.51 33.45 117.51 16 117.51 16 98.51"/><polygon class="cls-3" points="33.45 117.51 31.03 98.51 46 100.51 43.36 117.51 33.45 117.51"/><polygon class="cls-4" points="43.36 117.51 46 100.51 64 100.51 72.86 117.51 43.36 117.51"/><polygon class="cls-1" points="72.86 117.51 64 100.51 67 84.51 85 86.51 89.16 117.51 72.86 117.51"/><polygon class="cls-5" points="87.41 104.51 97 95.51 103 100.51 107.65 117.51 89.16 117.51 87.41 104.51"/><path class="cls-5" d="M759.26,447.65" transform="translate(-651.61 -330.85)"/><polygon class="cls-3" points="107.65 117.51 113.82 117.51 113.82 95.51 103 100.51 107.65 117.51"/><polygon class="cls-3" points="0 87.74 16 98.51 23 91.51 0 67.26 0 87.74"/><polygon class="cls-6" points="43.36 83.44 46 100.51 64 100.51 67 84.51 43.36 83.44"/><polygon class="cls-6" points="87.41 104.51 85 86.51 84 78.51 94.33 82.89 97 95.51 87.41 104.51"/><polygon class="cls-2" points="94.33 82.89 100 74.51 113.82 95.51 103 100.51 97 95.51 94.33 82.89"/><polygon class="cls-1" points="19.77 88.1 23 91.51 31.03 98.51 46 100.51 43.36 83.44 19.77 88.1"/><polygon class="cls-2" points="0 67.26 19.77 88.1 35.68 84.96 16.15 62.73 0 67.26"/><polygon class="cls-6" points="0 67.26 16.15 62.73 18.12 31.3 0.15 50.25 0 67.26"/><polygon class="cls-5" points="19.92 29.41 18.12 31.3 17.05 48.36 29.15 55 40.15 48 43.51 34.06 19.92 29.41"/><polygon class="cls-8" points="40.15 48 57.03 45.72 51.04 33.73 43.51 34.06 40.15 48"/><polygon class="cls-7" points="51.04 33.73 67.15 33 69.38 43 57.03 45.72 51.04 33.73"/><polygon class="cls-2" points="67.15 33 85.15 31 84.15 39 76.15 42.2 69.38 43 67.15 33"/><polygon class="cls-8" points="16.15 62.73 17.05 48.36 29.15 55 41.15 61 35.68 70 16.15 62.73"/><polygon class="cls-1" points="40.15 48 29.15 55 41.15 61 61.15 53 57.03 45.72 40.15 48"/><polygon class="cls-5" points="61.15 53 57.03 45.72 69.38 43 76.15 42.2 78.95 50.25 61.15 53"/><polygon class="cls-7" points="16.15 62.73 35.68 70 46.92 74.51 46 83.56 43.36 83.44 35.68 84.96 16.15 62.73"/><polygon class="cls-4" points="35.68 70 41.15 61 51.04 57.04 53.19 62.73 46.92 74.51 35.68 70"/><polygon class="cls-8" points="53.19 62.73 51.04 57.04 61.15 53 69.38 59.18 63.15 64 53.19 62.73"/><polygon class="cls-1" points="61.15 53 78.95 50.25 86.06 53.36 74.15 62 69.38 59.18 61.15 53"/><polygon class="cls-6" points="76.15 42.2 84.15 39 94.48 34.62 100.15 43 99.15 59 97 59.18 86.06 53.36 78.95 50.25 76.15 42.2"/><polygon class="cls-2" points="41.15 61 51.04 57.04 53.19 62.73 46.92 74.51 35.68 70 41.15 61"/><polygon class="cls-1" points="46 83.56 46.92 74.51 47.27 73.84 61.15 74.51 67 84.51 46 83.56"/><polygon class="cls-5" points="47.27 73.84 53.19 62.73 63.15 64 61.15 74.51 47.27 73.84"/><polygon class="cls-2" points="63.15 64 69.38 59.18 74.15 62 73.01 75.41 61.15 74.51 63.15 64"/><polygon class="cls-5" points="61.15 74.51 67 84.51 85 86.51 84 78.51 73.01 75.41 61.15 74.51"/><polygon class="cls-3" points="74.15 62 87.56 65.78 84 78.51 73.01 75.41 74.15 62"/><polygon class="cls-2" points="87.56 65.78 97 59.18 86.06 53.36 74.15 62 87.56 65.78"/><polygon class="cls-1" points="87.56 65.78 100 74.51 94.33 82.89 84 78.51 87.56 65.78"/><polygon class="cls-5" points="97 59.18 99.15 59 104.22 65.78 100 74.51 87.56 65.78 97 59.18"/><polygon class="cls-6" points="104.22 65.78 113.96 64 113.96 56.74 99.15 59 104.22 65.78"/><polygon class="cls-3" points="100 74.51 113.82 95.51 113.96 64 104.22 65.78 100 74.51"/></svg>

Is there a way to load it as a js object so i can iterate through it?

2

Use the FILE_LOAD event with file argument, check file.key, modify file.xhrLoader.responseText (you will have to parse and then reserialize).

4

Will try this approach.
Could you help me with converting the object back to svg after parsing and modifying it?

5