使用D3.js在SVG中限制Text元素的宽度

Question

I'm using D3.js. I created a text element in svg. I have a element.

<text id="text16" class="text" x="xx" y="yy" 
transform="translate(tx,ty)" height="hh" 
text-anchor="left"">DC_AAA_BBB_CCC_XXXX</text>

I want to reduce set the width. And when the text element width is smaller that the raw text's length(calculated from .getComputedTextLength), I want it to show up to the text element width. Such that only up to "DC_AAA_BBB_" is shown when raw text length is longer.

I've tried adding css -> width: 100px; Also tried adding width attribute in DOM -> width="100px"

Both did not work. How can I achieve this? Thanks!

Answer 1

You can use clip-path to clip to whatever shape you want, see eg masking-path-01 from the svg testsuite.

Relevant parts, defining the clip path:

<clipPath id="clip1">
  <rect x="200" y="10" width="60" height="100"/>
  ... you can have any shapes you want here ...
</clipPath>

and then apply the clip path like this:

<g clip-path="url(#clip1)">
  ... your text elements here ...
</g>