向SVG中的溢出文本添加省略号？ [英] Add ellipses to overflowing text in SVG?

问题描述

我使用D3.js.我想找到一个SVG等价于这个CSS类，如果文本流出它包含的div，它添加了椭圆：

I'm using D3.js. I'd like to find an SVG equivalent to this CSS class, which adds ellipses if text flows out of its containing 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元素重叠。

Currently the text is overflowing and overlapping the rect element.

有什么方法可以说如果文本超过一定宽度，裁剪和添加椭圆？

Is there any way I can say "if text is more than a certain width, crop it and add ellipses "?

推荐答案

我不知道SVG的等效CSS类，但是您可以使用 foreignObject 将HTML嵌入SVG。

I am not aware of an equivalent CSS class for SVG, but you can use foreignObject to embed HTML in SVG. This gives you access to this functionality and is more flexible in general (e.g. you can do automatic line breaking easily).

请参阅这里了一个完整的例子。

See here for a complete example.

这篇关于向SVG中的溢出文本添加省略号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！