将省略号添加到SVG中的溢出文本？

Question

我正在使用D3.js。我想找到一个与此CSS类等效的SVG，如果文本从其包含的div中流出，则会添加省略号：

.ai-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-binding: url(<q>assets/xml/ellipsis.xml#ellipsis</q>);
}

这是我的SVG：

<g class="bar" transform="translate(0,39)">
    <text class="label" x="-3" y="6.5" dy=".35em" text-anchor="start">Construction</text>    
    <rect height="13" width="123"></rect>
</g>

它的生成如下：

barEnter.append("text").attr("class", "label")
        .attr("x", -3).attr("y", function() { return y.rangeBand() / 2})
        .attr("dy", ".35em").attr("text-anchor", "start")
        .text(function(d) {
            return d.Name;
        });

当前文本溢出并且与rect元素重叠。

我有什么办法可以说：“如果文本大于特定宽度，则将其裁剪并添加省略号”？

Answer 1

我不知道SVG的等效CSS类，但是您可以foreignObject用来将HTML嵌入SVG。这使您可以使用此功能，并且通常更灵活（例如，您可以轻松进行自动换行）。