Trimming text to a given pixel width in SVG

Question

I\'m drawing text labels in SVG. I have a fixed width available (say 200px). When the text is too long, how can I trim it ?

The ideal solution would also add ellipsis (.

Answer 1

The linearGradient element can be used to produce a pure SVG solution. This example fades out the truncated text (no ellipsis):

(I had to use linear gradients to solve this because the SVG renderer I was using does not support the textPath solution.)