appendChild不起作用，firefox在mac上

Question

＆＃13;

＆＃13;

var xmlns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
var arrivedV;
var arrivedNV;
var count = 0;

var timerFunction = null;

var svgElement = document.getElementById("van");
svgElement.addEventListener("mousedown", mouseDown);

function mouseDown(e) {
  var x = e.clientX;
  var y = e.clientY;
  var coords = "X : " + x + ", Y : " + y;
  document.getElementById("mpost").value = coords;
  addtruck(x, y);
}

function addtruck(x, y) {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rectangle");
  rect.setAttributeNS(null, "x", x);
  rect.setAttributeNS(null, "y", y);
  rect.setAttributeNS(null, "width", 20);
  rect.setAttributeNS(null, "height", 20);
  rect.setAttributeNS(null, "fill", "#800000");
  rect.setAttributeNS(null, "stroke", "none");

  document.getElementById("svpg").appendChild(rect);
}

＆＃13;

<svg id="svpg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="934" height="502" style="border:1px solid #d3d3d3;" onmousedown="mouseDown(e);">

  <image id="van" xlink:href="/uploads/2/1/7/6/21767914/4792239_orig.png" x="0" y="0" height="100%" width="100%" />

  <rect id="seabus1" x="445" y="320" width="5" height="10" style="fill:rgb(0,0,255);" transform="rotate(36 445 320)" />

  <rect id="seabus2" x="590" y="130" width="5" height="10" style="fill:rgb(0,0,255);" transform="rotate(36 590 130)" />
  <rect id="tank1" x="50" y="180" width="20" height="5" style="fill:rgb(0,0,0);" transform="rotate(10 50 180)" />
  <rect id="tank2" x="40" y="280" width="20" height="5" style="fill:rgb(255,0,0); transform = " rotate(7 50 180) "" />
  <rect id="cargo1" x="498" y="296" width="20" height="5" style="fill:rgb(165,42,42);" transform="rotate(27 498 296)" />
</svg>

<input type="text" id="mpost" value="">

＆＃13;

＆＃13;

＆＃13;

我正在尝试从鼠标位置添加一个矩形。

我尝试了很多其他来自在线帮助的解决方案，但仍然没有运气。我试图附加到img也没有成功。基于我在网上看到的这应该有用，但我不知道我错过了什么。 我正在使用Firefox。

Answer 1

您从onmousedown="mousedown(e)"收到错误，因为没有变量e。使用内联处理程序时包含当前事件的全局变量的名称为event，因此它应为onmousedown="mousedown(e)"。

或者，您可以使用

document.getElementById("svpg").addEventListener("mousedown", mousedown);

我不确定您是否真的需要在mousedown和<svg>上使用<image>个处理程序。

＆＃13;

＆＃13;

var xmlns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
var arrivedV;
var arrivedNV;
var count = 0;

var timerFunction = null;

var svgElement = document.getElementById("van");
svgElement.addEventListener("mousedown", mouseDown);

function mouseDown(e) {
  var x = e.clientX;
  var y = e.clientY;
  var coords = "X : " + x + ", Y : " + y;
  document.getElementById("mpost").value = coords;
  addtruck(x, y);
}

function addtruck(x, y) {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rectangle");
  rect.setAttributeNS(null, "x", x);
  rect.setAttributeNS(null, "y", y);
  rect.setAttributeNS(null, "width", 20);
  rect.setAttributeNS(null, "height", 20);
  rect.setAttributeNS(null, "fill", "#800000");
  rect.setAttributeNS(null, "stroke", "none");

  document.getElementById("svpg").appendChild(rect);
}

＆＃13;

<svg id="svpg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="934" height="502" style="border:1px solid #d3d3d3;" onmousedown="mouseDown(event);">

  <image id="van" xlink:href="/uploads/2/1/7/6/21767914/4792239_orig.png" x="0" y="0" height="100%" width="100%" />

  <rect id="seabus1" x="445" y="320" width="5" height="10" style="fill:rgb(0,0,255);" transform="rotate(36 445 320)" />

  <rect id="seabus2" x="590" y="130" width="5" height="10" style="fill:rgb(0,0,255);" transform="rotate(36 590 130)" />
  <rect id="tank1" x="50" y="180" width="20" height="5" style="fill:rgb(0,0,0);" transform="rotate(10 50 180)" />
  <rect id="tank2" x="40" y="280" width="20" height="5" style="fill:rgb(255,0,0); transform = " rotate(7 50 180) "" />
  <rect id="cargo1" x="498" y="296" width="20" height="5" style="fill:rgb(165,42,42);" transform="rotate(27 498 296)" />
</svg>

<input type="text" id="mpost" value="">

＆＃13;

＆＃13;

＆＃13;