我目前正在使用SVG.我需要知道字符串长度(以像素为单位)才能进行一些对齐.如何获取像素的字符串长度？
更新:感谢nrabinowitz.基于他的帮助,我现在可以获得动态添加文本的长度.这是一个例子:
<svg id="main"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1020"
height="620"
viewBox="0 0 1020 620"
onload="startup(evt)">
<script>
<![CDATA[
var startup = function (evt) {
var width;
var svgNS = "http://www.w3.org/2000/svg";
var txtNode = document.createTextNode("Hello");
text = document.createElementNS(svgNS,"text");
text.setAttributeNS(null,"x",100);
text.setAttributeNS(null,"y",100);
text.setAttributeNS(null,"fill","black");
text.appendChild(txtNode);
width = text.getComputedTextLength();
alert(" Width before appendChild: "+ width);
document.getElementById("main").appendChild(text);
width = text.getComputedTextLength();
alert(" Width after appendChild: "+ width)
document.getElementById("main").removeChild(text);
}
//]]>
</script>
</svg>
我想显示一小段文字,可以包裹两三行.它是一个高度可视化的元素,为了造型目的,我希望线条的长度尽可能相等,更喜欢一条线而不是两条线.
而不是这个:
这是一个将包装为两个文本的示例
线.
我要这个:
这是一块的例子
将包装为两行的文本.
但我不想限制文本容器的宽度:
这篇文章足够长,几乎不适合两行.它
不应该包裹三行或更多行,因此没有宽度限制.
有没有办法在纯CSS或可容忍的JavaScript中执行此操作？
我对Javascript毫无希望.这就是我所拥有的:
<script type="text/javascript">
function beginrefresh(){
//set the id of the target object
var marquee = document.getElementById("marquee_text");
if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) {
marquee.scrollLeft = 0;
}
marquee.scrollLeft += 1;
// set the delay (ms), bigger delay, slower movement
setTimeout("beginrefresh()", 10);
}
</script>
它滚动到左边但我需要它相对无缝地重复.目前它只是跳回到开头.这可能不是我做的方式,如果没有,任何人都有更好的方法？
你如何得到一个字符串的大小？在Windows Forms中,它很简单,我只使用图形对象然后使用MeasureString函数.在ASP.NET中我不知道如何做到这一点.
我想知道String的确切长度(即"Hello World").
它不应该是我的容器的长度.
任何帮助???
有没有办法检测输入(type = text)元素的内容(值)是否超过其大小？
在Internet Explorer中,scrollWidth属性将大于style.width此时的属性.但是在Firefox中,scrollWidth总是等于style.width并且是一个已知的错误(https://bugzilla.mozilla.org/show_bug.cgi?id=343143),也许不是bug,因为Mozilla根本不认为输入元素是"可滚动的" ,但仍然.根据这种观点,Firefox的textarea元素scrollWidth在内容溢出边界时正确设置属性.
目前,我唯一的想法是:(a)使用textarea元素,并以某种方式将其限制为单行输入或(b)在输入的每个keyup事件中,将内容复制到类似形状的div元素并查看其scrollWidth属性.
在FF中有没有更好的方法来实现这一目标？
如果我知道font-size和font-family,如何在javascript中找到字符串的长度(以像素为单位)？
使用SnapSVG获取'paper'对象大小的正确方法是什么？
我的HTML看起来如下:
<div id="myContainer" style="width: 900px; height: 100px" />
然后是Javascript代码:
function initViewer(elementId) {
var element, elementRef, snap;
elementRef = '#' + elementId;
element = $(elementRef);
element.append('<svg style="width: ' + element.width() + 'px; height: ' + element.height() + 'px; border: solid 1px black;"/>');
snap = Snap(elementRef + ' svg');
console.log(snap.getBBox());
}
我在这里观察到的是所有属性的边界框都有'0',所以我不能在这里依赖边界框值.有没有办法做到这一点,而不必去父元素？
基本上我想要的就是SVG的宽度和高度,所以我可以为视图绘制合适大小的形状.
JS Fiddle,说明了这个问题:https://jsfiddle.net/ajmas/kdnx2eyf/1/
