Limiting Width on a Text element in SVG using D3.js

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!

See https://stackoverflow.com/questions/6691674/how-can-i-limit-or-clip-text-in-svg — mgraham, Jul 26 '17 at 21:39

score 0 · Accepted Answer · answered Nov 30 '17 at 14:48

You can use clip-path to clip to whatever shape you want, see e.g 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>

Limiting Width on a Text element in SVG using D3.js

1 Answers1