SVG PacMan 中的鬼眼在 Firefox 中正确呈现,但在其他浏览器中不正确
Ghost eyes in SVG PacMan are rendered correctly in Firefox, but not in other browsers
我的 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, "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);
}
}
如果我在所有浏览器中启用幽灵的眼睛,那么在 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);
}
我的 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, "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);
}
}
如果我在所有浏览器中启用幽灵的眼睛,那么在 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);
}