如何确定 SVG 文本框宽度，或在“x"字符后强制换行?

问题描述

我正在使用 Raphael 库创建一个 SVG 文本框，并使用从 XML 文档中提取的动态字符串填充它.

I'm creating an SVG text box using the Raphael library, and filling it with a dynamic string which is extracted from an XML document.

有时，这个字符串比我放置文本框的画布长，所以我需要限制框的宽度，这本身会强制换行(我找不到任何可能的证据) 或确保在一定数量的字符后插入一个 '' 换行符.

Sometimes, this string is longer than the canvas I am placing the text box on, so I need to either limit the width of the box which will itself force the line breaks (I can't find any evidence of this being possible) OR ensure that a '' line break is inserted after a certain amount of characters.

那么 (1) 这是最好的选择吗?以及 (2) 我将如何做到这一点?

So (1) is this the best option? And (2) how would I do this?

推荐答案

没有用于文本换行的属性，但是您可以使用一个简单的技巧.一次向文本对象添加一个单词，当它变得太宽时，添加换行符.您可以使用 getBBox() 函数来确定宽度.基本上，您可以模拟老式打字机.下面是一些可以为您执行此操作的代码示例.你可以很容易地把它变成一个简单的函数，它接受文本和宽度.

There isn't an attribute for text wrapping, but there is a simple trick you can use. Add one word at a time to a text object and when it gets too wide, add a line feed. You can use the getBBox() function to determine the width. Basically, you emulate an old fashioned typewriter. Here is a sample of some code that will do this for you. You could easily turn this into a simple function that takes the text and a width.

var r = Raphael(500, 500);
var t = r.text(100, 100).attr('text-anchor', 'start');
var maxWidth = 100;

var content = "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. ";
var words = content.split(" ");

var tempText = "";
for (var i=0; i<words.length; i++) {
  t.attr("text", tempText + " " + words[i]);
  if (t.getBBox().width > maxWidth) {
    tempText += "
" + words[i];
  } else {
    tempText += " " + words[i];
  }
}

t.attr("text", tempText.substring(1));

这篇关于如何确定 SVG 文本框宽度，或在“x"字符后强制换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！