我有一个img标记作为<div id="container">标记的唯一子标记。 width，height和usemap都在图片上设置，style="position:absolute;"和usemap="#amap"也是如此。
我的任务：编写Javascript，为显示图像地图区域的图像添加SVG叠加层，保留title工具提示。为此，我在script的{{1}}元素中编写了以下代码：
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;
是一个CSS类，基本上只是使形状可见。
这就是事情：即使Chrome的DevTools显示正在使用所有适当的子项生成svg元素（将生成的正文HTML复制到新的静态页面中会产生正确的结果），但它不会出现在页面上。进一步检查显示SVG的尺寸为0×0，即使它具有非零svg_shape和width属性。是什么给了什么？
答案 0 :(得分：1)
您需要使用createElementNS来创建SVG元素。
对于classNames，它是
r.className.baseVal = "svg_shape"
允许SVG中的SMIL，动画和基本（非动画）值是分开的。