SVG Word Wrap -显示阻塞器？
有趣的是，我正在尝试为我在业余时间摆弄的RIA实现一个SVG浏览器客户端。
但这似乎遇到了一个巨大的障碍。没有自动换行！！
有没有人知道解决这个问题的方法(我想是某种JavaScript或者特殊的标签，我不知道)？
如果没有，我要么走xhtml路线，开始在我的SVG中粘贴HTML元素(糟了)，要么在十年后SVG 1.2准备好的时候再回来。
回答 7
Stack Overflow用户
发布于 2011-03-19 23:14:27
还有foreignObject标签。然后，您可以将HTML嵌入到SVG中，这提供了最大的灵活性。HTML对于文档布局来说非常棒，为了支持应用程序布局、绘图和我们开发人员想要的一切，它已经被攻克得无穷无尽。但它的强项是word换行和文档布局。让HTML做它最擅长的事情，让SVG做它最擅长的事情。
http://www.w3.org/TR/SVG/extend.html
这适用于大多数浏览器FireFox，Opera，Webkit，除了IE (从IE11开始)。:-(网络的故事，不是吗？
http://schmerg.com/svg-support-in-ie9-close-but-should-try-harde
Stack Overflow用户
发布于 2013-07-25 16:35:57
SVG的东西很让人费解，不是吗？
值得庆幸的是，您可以获得一些好的结果，但这比使用HTML5需要更多的工作。
这是我的ASP.Net / SVG应用程序的屏幕截图，其中包含一些“伪造”的换行。
下面的函数将为您创建一个SVG 文本元素，分成多个tspan片段，其中每行的长度不超过20个字符。
<text x="600" y="400" font-size="12" fill="#FFFFFF" text-anchor="middle">
<tspan x="600" y="400">Here a realy long </tspan>
<tspan x="600" y="416">title which needs </tspan>
<tspan x="600" y="432">wrapping </tspan>
</text>它并不完美，但它简单、快速，用户永远不会知道其中的区别。
我的createSVGtext() JavaScript函数有三个参数:x位置、y位置和要显示的文本。字体、每行最大字符数和文本颜色都是在我的函数中硬编码的，但这些都可以很容易地更改。
要显示上面屏幕截图中显示的右侧标签，您可以使用以下命令调用该函数：
var svgText = createSVGtext("Here a realy long title which needs wrapping", 600, 400);
$('svg').append(svgText);下面是JavaScript函数：
function createSVGtext(caption, x, y) {
// This function attempts to create a new svg "text" element, chopping
// it up into "tspan" pieces, if the caption is too long
//
var svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgText.setAttributeNS(null, 'x', x);
svgText.setAttributeNS(null, 'y', y);
svgText.setAttributeNS(null, 'font-size', 12);
svgText.setAttributeNS(null, 'fill', '#FFFFFF'); // White text
svgText.setAttributeNS(null, 'text-anchor', 'middle'); // Center the text
// The following two variables should really be passed as parameters
var MAXIMUM_CHARS_PER_LINE = 20;
var LINE_HEIGHT = 16;
var words = caption.split(" ");
var line = "";
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + " ";
if (testLine.length > MAXIMUM_CHARS_PER_LINE)
{
// Add a new <tspan> element
var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
svgTSpan.setAttributeNS(null, 'x', x);
svgTSpan.setAttributeNS(null, 'y', y);
var tSpanTextNode = document.createTextNode(line);
svgTSpan.appendChild(tSpanTextNode);
svgText.appendChild(svgTSpan);
line = words[n] + " ";
y += LINE_HEIGHT;
}
else {
line = testLine;
}
}
var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
svgTSpan.setAttributeNS(null, 'x', x);
svgTSpan.setAttributeNS(null, 'y', y);
var tSpanTextNode = document.createTextNode(line);
svgTSpan.appendChild(tSpanTextNode);
svgText.appendChild(svgTSpan);
return svgText;
}换行的逻辑是基于this HTML5 Canvas tutorial的
我希望这对你有用！
麦克
http://www.MikesKnowledgeBase.com
更新
有一件事我忘了提。
我上面显示的“工作流图”屏幕最初是使用HTML5 canvas编写的。它运行得非常漂亮，图标可以拖动，当你点击它们时，弹出菜单就会出现，就连IE8也似乎对此很满意。
但是我发现如果图表变得“太大”(例如4000 x 4000像素)，那么在所有浏览器中都无法初始化，除了之外什么都不会出现--就JavaScript代码而言，一切都很正常。
因此，即使进行了错误检查，我的图表也显示为空白，并且我无法检测到这个显示停止程序问题何时发生。
var canvasSupported = !!c.getContext;
if (!canvasSupported) {
// The user's browser doesn't support HTML 5 <Canvas> controls.
prompt("Workflow", "Your browser doesn't support drawing on HTML 5 canvases.");
return;
}
var context = c.getContext("2d");
if (context == null) {
// The user's browser doesn't support HTML 5 <Canvas> controls.
prompt("Workflow", "The canvas isn't drawable.");
return;
}
// With larger diagrams, the error-checking above failed to notice that
// the canvas wasn't being drawn.因此，这就是我不得不重写JavaScript代码以使用SVG的原因。它只是看起来能更好地处理较大的图表。
Stack Overflow用户
发布于 2009-02-18 14:28:39
SVGT1.2引入了textArea元素http://www.w3.org/TR/SVGTiny12/text.html#TextInAnArea，但目前只有Opera10在实验上支持它。我不知道其他浏览器是否会计划实现它，尽管我希望他们会。
https://stackoverflow.com/questions/475804
复制相似问题
腾讯云开发者
