我通过javascript将文本元素附加到svg。在追加我想设置x和y坐标之后,当使用它来计算x时,它会返回错误的文本元素宽度。
有趣: 在Chrome中,当通过F5或按钮实现页面时,它会返回错误的宽度,当在地址栏中按Enter键时,宽度是正确的 - 奇怪!
这是小代码:
var capt = document.createElementNS("http://www.w3.org/2000/svg", "text");
// Set any attributes as desired
capt.setAttribute("id","capt");
capt.setAttribute("font-family","Righteous");
capt.setAttribute("font-size","30px");
capt.setAttribute("fill", "rgb(19,128,183)");
var myText = document.createTextNode(this.options.captTxt);
capt.appendChild(myText);
this.elements.jSvgElem.append(capt);
capt.setAttribute("x", this.options.windowWidth-this.options.spacer-document.getElementById("capt").offsetWidth);
capt.setAttribute("y", this.options.captY+$('#capt').height());
答案 0 :(得分:0)
好的,问题似乎是浏览器在使用其他字体时没有计算正确的宽度。不设置字体会产生正确的宽度。
我通过设置属性将参考点(“对齐点”)设置到文本元素的右上角来解决问题:
capt.setAttribute(“text-anchor”,“end”); capt.setAttribute(“alignment-baseline”,“hanging”);
这样我就不必减去宽度并添加元素的高度了!
答案 1 :(得分:0)
有一个错误:http://code.google.com/p/chromium/issues/detail?id=140472
它只是预先启动一些计算文本宽度的函数,所以你应该先调用这个函数(我确定有几行可以删除):
fixBug = function () {
var text = makeSVG("text", { x: 0, y: 0, fill: "#ffffff", stroke: '#ffffff'});
text.textContent = "";
var svg = $("svg")[0];
svg.appendChild(text);
var bbox = text.getBBox();
var Twidth = bbox.width;
var Theight = bbox.height;
svg.removeChild(text);
}
$(“svg”) - Jquery选择器