svg中如何让文本溢出时显示省略号

svg中如何让文本溢出时显示省略号

最近在使用d3.js实现一个树状组织结构图，遇到如下图所示的问题，要求是文本内容固宽，溢出内容应用省略号代替，如果是使用普通html标签实现的话，是比较简单的，overflow: hidden; text-overflow: ellipsis; white-space: nowrap;即可，但是在使用svg标签进行作图时，将这些css属性应用到<text>标签上显然是不生效的，那如何在svg中实现文本溢出显示省略号呢？

解决方法就是使用svg中的<foreignObject>标签，这是个神奇的标签，在该标签内部我们可以像平时一样使用html任何标签，并添加css样式；先看一个简单的例子：

利用<rect>标签画了一个200*200的方块区域，想在其上方显示文本内容，当内容超过方块内容时显示省略号

<svg width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="#00bcd4"></rect>
  <foreignObject x="0" y="0" width="200" height="100">
    <div style="color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">我是写在foreignObject标签中内容，哈哈哈哈哈哈哈哈哈</div>
  </foreignObject>
</svg>

效果如下：

从上面的例子中看一看出在svg中可以通过使用<foreignObject>标签对溢出的文本做显示省略号处理，按照同样的方法，我们对文章开始抛出的问题进做类似处理后最终效果如下：