SVG PacMan 中的鬼眼在 Firefox 中可以正确呈现，但在其他浏览器中则不能

问题描述

我的 SVG PacMan 的 GitHub 存储库可在此处获得：https://github.com/FlatAssembler/SVG-Pacman

你可以在这里看到它：http://flatassembler.github.io/pacman.html

绘制鬼魂的功能在这里：

      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,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);
        }
      }

如果我在所有浏览器中都启用了鬼魂的眼睛，在 Firefox 以外的浏览器中，鬼魂不再动画。我用来制作鬼魂动画的代码如下：

          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]] +
                    ")"
                );
         }

就好像 SVG 转换在 Firefox 以外的浏览器中对 <svg> 元素本身没有影响。我该怎么办？

解决方法

自己解决了，这是我修改drawGhost函数的方法：

        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);
        }