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>標籤對溢出的文本做顯示省略號處理，按照同樣的方法，我們對文章開始拋出的問題進做類似處理後最終效果如下：