javascript - How to import, manipulate long svg file format to make animation in html js

Currently i'm working on php to make a simple crack egg game. previously I already design some egg skins with svg format. so the skin contains simple svg code. Now I trying to implement new skin, however the svg format code is different when i export it from Adobe Photoshop. it contains a very long svg code format. now it make me very hard to implement it on current code.

let say i have an array of egg skin, because i want randomize it. topEgg and bottomEgg because the egg will separate when cracked.

let topEgg = ['<path id="top" d="M151,72.63C144.08,28.54,113.22.13,76.16.13,42.55.13,9.8,28.09,2.48,69.47l30.21,6.32L75.5,69.47l47.37,6.32Z" style="fill:#22205f"/>' +
          '<path id="shtop" d="M14.41,72.25C22.2,34.73,49.86,3.53,82.84.31,80.74.12,78.62,0,76.47,0,40.7,0,10.54,29.78,2.26,69.65Z" style="fill:#114"/>',
          '<path id="top" d="M151,72.63C144.08,28.54,113.22.13,76.16.13,42.55.13,9.8,28.09,2.48,69.47l30.21,6.32L75.5,69.47l47.37,6.32Z" style="fill:#ffcd05"/>' +
          '<path id="shtop" d="M14.41,72.25C22.2,34.73,49.86,3.53,82.84.31,80.74.12,78.62,0,76.47,0,40.7,0,10.54,29.78,2.26,69.65Z" style="fill:#e4b922"/>'];


let bottomEgg = ['<path id="bottom" d="M2.48,69.47A109.07,109.07,0,0,0,0,92.63H.08C.09,147.37,34.17,184,76.3,184s76.22-41.19,76.22-91.71v-.12h0a120.74,120.74,0,0,0-2.09-22.64l-27.56,6.32L76.55,69.47,32,75.79Z" style="fill:#22205f"/>' + 
          '<path id="shbottom" d="M12.71,91.58h0a108.41,108.41,0,0,1,1.74-19.33L2.26,69.65A108.52,108.52,0,0,0,0,91.58h0C0,147.11,30.94,183,73.14,184a51.91,51.91,0,0,0,6.25-.31C40.26,180.21,12.72,143.52,12.71,91.58Z" style="fill:#114"/>',
          '<path id="bottom" d="M2.48,69.47A109.07,109.07,0,0,0,0,92.63H.08C.09,147.37,34.17,184,76.3,184s76.22-41.19,76.22-91.71v-.12h0a120.74,120.74,0,0,0-2.09-22.64l-27.56,6.32L76.55,69.47,32,75.79Z" style="fill:#ffcd05"/>' + 
          '<path id="shbottom" d="M12.71,91.58h0a108.41,108.41,0,0,1,1.74-19.33L2.26,69.65A108.52,108.52,0,0,0,0,91.58h0C0,147.11,30.94,183,73.14,184a51.91,51.91,0,0,0,6.25-.31C40.26,180.21,12.72,143.52,12.71,91.58Z" style="fill:#e4b922"/>'];


Copy code

and the i will call thetopEgg andbottomEgg to the screen ineggLayout(). i will replacetopLayout andbottomLayout withtopEgg andbottomEgg after randomize. also have listener inside DOM content to trigger the crackstartCrack(event, this.id)

function eggLayout() {


const content =
                '<div>' +
                    '<svg version="1.1" id="egg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" viewBox="0 0 152.52 184.03" enable-background="new 0 0 300 400" xml:space="preserve">' +
                        '<g id= '+eggId+' onclick="startCrack(event, this.id)">' +
                            '<g id= '+eggTopId+' style="display: flex;">' + 
                                topLayout +
                            '</g>' +
                            '<g id="bottomid">' +
                                bottomLayout +
                            '</g>' +
                            '<path d="M74.37,131.25c-3.29-.24-6.24-1.16-8-4.21a9.85,9.85,0,0,1-.8-7.45c1.54-6.74,5.61-11.51,11.53-14.88.78-.44,1,0,1.19.54l3.08,3.13,8.89-22L65.46,91.48c1,1.09,1.84,2,2.75,2.9.61.58.48.86-.15,1.31A28.38,28.38,0,0,0,62.44,101c-4.82,6-7.87,12.63-7.24,20.5.4,5,2.83,8.68,7.6,10.4,6,2.14,11.77,1.15,17.42-1.31h0C78.25,130.77,76.36,131.39,74.37,131.25Z" style="fill:#f9da09"/>' +
                            '<path d="M90.89,99.68c-1.26-.34-2.55-.6-3.82-.87-.37-.08-.78-.29-.93.34a.69.69,0,0,0,.52,1,7.62,7.62,0,0,1,3.18,2.23C93,106,93.52,110,91.39,114.27A21,21,0,0,1,78.54,125.2a10.21,10.21,0,0,1-4,.51c-5.11-.46-7.72-4.24-6.39-9.3,1.43-5.46,5.34-8.71,10.12-11.16-.22-.55-.41-1-1.19-.54-5.92,3.37-10,8.14-11.53,14.88a9.85,9.85,0,0,0,.8,7.45c1.77,3,4.72,4,8,4.21,2,.14,3.88-.48,5.83-.69.11-.26.28-.26.48-.11a29.5,29.5,0,0,0,11.84-8.52,23.32,23.32,0,0,0,5.58-10.61C99.24,105.59,96.52,101.19,90.89,99.68Z" style="fill:#c9ad30"/>' +
                        '</g>' +
                    '</svg>' +
                '</div>';

document.getElementById("wrapperlayout").innerHTML += content;
}
Copy code

so now the problem is i want implement new skin, and the svg code format was very different from previous. it contain very long code svg because have a lot of design.

currently i code like this, to call the svg file, and implement the click function like this. but its only trigger for the first egg only. because i loop the content to 6 of eggs.

is there any example or proper way to do this? thanks.

const content =
                '<div>' +
                    '<object data="../egg_skin/egg_skin_1.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>'
                '</div>';

            document.getElementById("wrapperlayout").innerHTML += content;
            
            var  bbox = document.getElementById("alphasvg");
            bbox.addEventListener("load",function(){

                var svgDoc = bbox.contentDocument.getElementById("Top_Part");
                var svgDoc2 = bbox.contentDocument.getElementById("Cracked_Design");
                svgDoc2.addEventListener("click",function(){
                        alert('hello world!')
                }, false);
                console.log(svgDoc);

            }, false);
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.