javascript动态创建跨度并垂直对齐文本:文本保持在底部

时间:2015-09-28 15:23:40

标签: javascript svg

我正在尝试生成一个svg矩形和一个span,以便span元素中的文本与svg元素垂直对齐。在声明式HTML + CSS中,我设法做到了。 但我无法通过javascript实现这一目标。

这是我的javascript代码:

/* Svg creation
==============================*/
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 60);
svg.setAttribute("height", 60);


var square = document.createElementNS("http://www.w3.org/2000/svg", "rect");
square.setAttribute("x", 0);
square.setAttribute("y", 0);
square.setAttribute("width", 60);
square.setAttribute("height", 60);
square.setAttribute("fill", "red");

svg.appendChild(square);
document.body.appendChild(svg);

/* Span creation
==============================*/

var outerSpan = document.createElement("span");
outerSpan.style.height = "60px";
outerSpan.style.lineHeight = "60px";

var innerSpan = document.createElement("span");
innerSpan.style.display = "inline-block";
innerSpan.style.verticalAlign = "middle";
innerSpan.style.lineHeight = "1em";
innerSpan.textContent = "Red square";

outerSpan.appendChild(innerSpan);
document.body.appendChild(outerSpan);

这里my codepen attempt:您可以注意到html + css代码有效,但不是javascript代码,我的意思是,它显示了所有内容,但并不是我想要的。

1 个答案:

答案 0 :(得分:2)

这是因为svg元素的垂直对齐方式不是middle本身;它是baseline(默认)。这里的svg元素将自己与基线对齐,这是文本的底部。

只需指定:

即可解决此问题
svg.style.verticalAlign = "middle";

Codepen example