问题标签 [tspan]

我试图理解 svg 中的 tspan 标签，这有点奇怪。看下面的代码，FF 和 Chrome 在 tspan 之间引入了水平偏移，但不应该有。

现在转到http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html并在 SVG 编辑器（顶部菜单栏中的第二个按钮）中输入代码并应用更改。tspan 之间的偏移量不存在！我不知道为什么，HTML、SVG 和 CSS 似乎都没有什么特别之处。

我希望有人能解开这个谜。它似乎与字体大小有关，改变了偏移量。但是，当它设置为 0px 时，文本会消失。

我有一个字符串数组。说，

我正在用这些字符串创建一个垂直文本，就像这样

渲染 svg 后，我发现文本的高度为 36px。现在有没有办法计算在给定字体大小的情况下将预先呈现的文本的高度？

假设我想以编程方式在以下 SVG<tspan>的元素中插入一个附加项：<text>

这可以通过纯 JavaScript ( .appendChild)、jQuery ( .append) 和 d3.js ( .append) 来完成。但是，尽管所有三种方法都成功插入了元素，但我似乎只能在 d3.js 插入它时让它实际显示：

请参阅此小提琴中的简化案例：http: //jsfiddle.net/2NLJY/。

这种行为在我测试过的浏览器中是一致的：Firefox、Chrome 和 Safari（所有 OS X 10.8）。

这里发生了什么？

I'm trying to write HTML symbols (like °) in a TSPAN element with jQuery. In a simple SPAN it's easy:

With the TSPAN this way doesn't work, if I use

nothing is printed out.

With

° is printed instead of ° (obviously)

Look at the JSFiddle

How can I do?

如果我使用 text() 动态更新 tspan，Chrome 不会呈现：

这在除 chrome 之外的所有浏览器中都可以正常工作。如果我评论这条 javascript 行，一切都可以在 chrome 上正常工作。

你能告诉我为什么它不能在 chrome 上运行吗？除了跨度，我不能使用任何其他标签。

我有一个页面，我们使用 SVG 来呈现序列图。所表示的某些数据有时可能会很长，因此我想限制 TSPAN 元素的宽度并提供省略号，同时允许用户将鼠标悬停在文本上并显示全文。

最初我尝试通过将值设置为“省略号”来将 CSS 与 text-overflow 属性结合使用，这是我正在寻找的确切行为，但它没有可用的功能（大坏蛋）还有其他方法吗限制文本的长度并允许在悬停等动作上显示全文？

我拆开了一个大的 SVG，发现了这个奇怪的故障（小提琴在这里）

使用一行 CSS：

给出错误的自动换行：

字
1 字 2

有点解决了我自己的问题，但会留在这里，以防其他人发现 tspan 自动换行和 CSS 存在问题并且需要知道原因 - 或者可以解释为什么会发生这种情况，答案可能会有用。

嗯。既然我已经弄清楚了如何使用 TSPAN 动态地包装 SVG 文本（请参阅SVG 文本中的自动换行），但尝试对其进行动画处理让我很难过。我基于 Mike Bostock 的 Zoomable Treemap 示例。

我的文本换行代码是这样调用的：

将旧的 Mike 线放回去可以正常工作，但会删除文本换行：

我原以为你只需要为父 TEXT 元素设置动画，但我让文本在 Chrome 中向奇怪的方向移动（在 IE9 中甚至更糟糕的行为，其中文本还不想换行）。我怀疑这与具有 x 属性的 TSPAN 有关，但看不到除此之外的前进方向......

单线

折线

JS 代码很长，所以这里是小提琴链接：http: //jsfiddle.net/gHdR6/6/

我需要在 SVG 中输出多行文本。为此，我使用以下方案：

文本的第一行和第二行可以有不同的字符数，可以动态变化。我希望第二行出现在第一行下方，并且两者中的文本都居中。

我可以通过添加第二行使第二行出现在第一行dy="15"下方<tspan>。

<tspan>我可以通过添加来对齐每个人的文本text-anchor="middle"。

但是如何做那些<tspan>的相对中心对齐？

我尝试使用x="0"每个<tspan>，但显然它不起作用，因为每个<tspan>都有不同的宽度，并且较短行中的渲染文本向左移动。

有没有办法仅使用 CSS 和/或 SVG 来对齐<tspan>不同宽度的 2 的中心。

当从 ng-bind-html 属性加载 tspan 时，我无法使用 angularjs 构建 svg，Firefox 和 IE 不显示它们。

我的控制器看起来像这样：

我创建了一个小提琴来说明

http://jsfiddle.net/3WNhT/

对于铬，没关系。