为什么我不能从图像地图制作SVG？

Question

I have an img tag as the sole child of a <div id="container"> tag. width , height , and usemap are all set on the image, as are style="position:absolute;" and usemap="#amap" .

My quest: to write Javascript that adds an SVG overlay to the image showing the areas of the imagemap, preserving title tooltips. To that end, I have written the following code in a script element in the head :

function makeCircle(area)
{
  var c = document.createElement("circle");
  var coords = area.coords.split(",");

  c.setAttribute("cx", coords[0]);
  c.setAttribute("cy", coords[1]);
  c.setAttribute("r", coords[2]);

  c.className = "svg_shape";

  var t = document.createElement("title");
  t.innerHTML = area.title;
  c.appendChild(t);

  return c;
}

function makeRect(area)
{
  var r = document.createElement("rect");
  var coords = area.coords.split(",");

  r.setAttribute("x", coords[0]);
  r.setAttribute("y", coords[1]);

  r.setAttribute("width", coords[2] - coords[0]);
  r.setAttribute("height", coords[3] - coords[1]);

  r.className = "svg_shape";

  var t = document.createElement("title");
  t.innerHTML = area.title;
  r.appendChild(t);

  return r;
}

function makePoly(area)
{
  var p = document.createElement("polygon");
  var coords = area.coords.split(",");

  var coords2 = [];
  coords2.push(coords[0]);
  for(var i = 1; i < coords.length; i++)
  {
    if(i % 2 === 0)
      coords2.push(" ");
    else
      coords2.push(",");

    coords2.push(coords[i]);
  }

  p.setAttribute("points", coords2.join(""));

  p.className = "svg_shape";

  var t = document.createElement("title");
  t.innerHTML = area.title;
  p.appendChild(t);

  return p;
}

function makeSVG()
{
  var container = document.getElementById("container");
  var image = container.firstElementChild;
  var map = document.getElementsByName("amap")[0];
  var svg = document.createElement("svg");

  container.appendChild(svg);

  svg.setAttribute("width", image.width);
  svg.setAttribute("height", image.height);
  svg.style.position="absolute";
  //svg.style.width=image.width;
  //svg.style.height=image.height;

  var children = map.children;
  for(var i = 0; i < children.length; i++)
  {
    var area = children[i];
    var type = area.shape;
    if(type==="circle")
    {
      svg.appendChild(makeCircle(area));
    }
    else if(type==="rect")
    {
      svg.appendChild(makeRect(area));
    }
    else if(type==="poly")
    {
      svg.appendChild(makePoly(area));
    }
  }
}

window.onload = makeSVG;

svg_shape is a CSS class that basically just makes the shape visible.

Here's the thing: Even though Chrome's DevTools shows that the svg element is being generated with all the appropriate children (copying the body HTML it generates into a new static page produces the right results), it doesn't appear on the page. Further inspection shows that the SVG has dimensions 0×0, even though it has nonzero width and height attributes. What gives?

Answer 1

You need to use createElementNS to create SVG elements.

For classNames it's

r.className.baseVal = "svg_shape"

to allow for SMIL in SVG, animated and base (non-animated) values are separate.