Ghost eyes in SVG PacMan are rendered correctly in Firefox, but not in other browsers

The GitHub repository of my SVG PacMan is available here: https://github.com/FlatAssembler/SVG-Pacman

You can see it alive here: http://flatassembler.github.io/pacman.html

The function for drawing ghosts is here:

 function drawGhost(x, y, color, id, transparent) { //Duhovi su geometrijski likovi omedeni crtama (dno) i kubicnom Bezierovom krivuljom (vrh). if (/Firefox/.test(navigator.userAgent)) { var svg = document.createElementNS(XML_namespace_of_SVG, "svg"); svg.setAttribute("x", x - 8); svg.setAttribute("y", y - 16); var path = document.createElementNS(XML_namespace_of_SVG, "path"); path.setAttribute("fill", color); var d = "M " + 0 + " " + (16 + 8); d += "C " + 3 + " " + 0 + " " + (8 + 5) + " " + 0 + " " + (8 + 8) + " " + (16 + 8); d += " l -4 -3 l -4 3 l -4 -3 Z"; path.setAttribute("d", d); svg.setAttribute("id", id); if (transparent) svg.setAttribute("fill-opacity", 0.5); //Siluete (bijeli duhovi). svg.appendChild(path); var left_eye = document.createElementNS( XML_namespace_of_SVG, "circle" ); left_eye.setAttribute("cx", 5); left_eye.setAttribute("cy", 15); left_eye.setAttribute("r", 2); left_eye.setAttribute("fill", "black"); svg.appendChild(left_eye); var right_eye = document.createElementNS( XML_namespace_of_SVG, "circle" ); right_eye.setAttribute("cx", 11); right_eye.setAttribute("cy", 15); right_eye.setAttribute("r", 2); right_eye.setAttribute("fill", "black"); svg.appendChild(right_eye); zaslon.appendChild(svg); } else { var path = document.createElementNS(XML_namespace_of_SVG, "path"); path.setAttribute("fill", color); var d = "M " + (x - 8) + " " + (y + 8); d += "C " + (x - 5) + " " + (y - 16) + " " + (x + 5) + " " + (y - 16) + " " + (x + 8) + " " + (y + 8); d += " l -4 -3 l -4 3 l -4 -3 Z"; path.setAttribute("d", d); path.setAttribute("id", id); if (transparent) path.setAttribute("fill-opacity", 0.5); //Siluete (bijeli duhovi). zaslon.appendChild(path); } } 

If I enable the eyes of the ghosts to be rendered in all browsers, in browsers other than Firefox the ghosts are no longer animated. The code I use for animating the ghosts is as follows:

 for (var i = 0; i < 3; i++) { if ( jeLiPacmanPojeoDuha[i] && brojacGlavnePetlje - kadaJePacmanPojeoVelikuTocku < 30 ) //Ako je PacMan nedavno pojeo duha, animiraj bijelu siluetu... zaslon .getElementById("bijeli" + (i + 1)) .setAttribute( "transform", "translate(" + (20 / 5) * brojacAnimacijskePetlje * xKomponentaSmjeraPacmana[smjerKretanjaSiluete[i]] + " " + (20 / 5) * brojacAnimacijskePetlje * yKomponentaSmjeraPacmana[smjerKretanjaSiluete[i]] + ")" ); //... inace animiraj duha. else zaslon .getElementById("duh" + (i + 1)) .setAttribute( "transform", "translate(" + (20 / 5) * brojacAnimacijskePetlje * xKomponentaSmjeraPacmana[smjerDuha[i]] + " " + (20 / 5) * brojacAnimacijskePetlje * yKomponentaSmjeraPacmana[smjerDuha[i]] + ")" ); } 

It is as if SVG transforms, in browsers other than Firefox, have no effect on <svg> elements themselves. What should I do?

1 Answer

Solved it myself, here is how I modified the drawGhost function:

 function drawGhost(x, y, color, id, transparent) { //Duhovi su geometrijski likovi omedeni crtama (dno) i kubicnom Bezierovom krivuljom (vrh). var svg = document.createElementNS(XML_namespace_of_SVG, "g"); svg.setAttribute("x", x - 8); svg.setAttribute("y", y - 16); var path = document.createElementNS(XML_namespace_of_SVG, "path"); path.setAttribute("fill", color); var d = "M " + (x - 8) + " " + (y + 8); d += "C " + (x - 5) + " " + (y - 16) + " " + (x + 5) + " " + (y - 16) + " " + (x + 8) + " " + (y + 8); d += " l -4 -3 l -4 3 l -4 -3 Z"; path.setAttribute("d", d); svg.setAttribute("id", id); if (transparent) svg.setAttribute("fill-opacity", 0.5); //Siluete (bijeli duhovi). svg.appendChild(path); var left_eye = document.createElementNS( XML_namespace_of_SVG, "circle" ); left_eye.setAttribute("cx", x - 8 + 5); left_eye.setAttribute("cy", y - 16 + 15); left_eye.setAttribute("r", 2); left_eye.setAttribute("fill", "black"); svg.appendChild(left_eye); var right_eye = document.createElementNS( XML_namespace_of_SVG, "circle" ); right_eye.setAttribute("cx", x - 8 + 11); right_eye.setAttribute("cy", y - 16 + 15); right_eye.setAttribute("r", 2); right_eye.setAttribute("fill", "black"); svg.appendChild(right_eye); zaslon.appendChild(svg); } 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobW9vaGaCeYSOoJ%2Boq6Risrqx0magp2Wjq7RuvMCcpJqmXZa%2FpnnRnqWdnaKasW6vzqupnpukocZutc1mnaKqlZu8uXnBrqtmpp%2Bpeqq6jKiroZ2iYq%2Bzuw%3D%3D