Clip SVG text to width of rectangle in a D3 treema

Question

I'm wondering if there is a simpler way to restrict the width of a text label than using a clip path.

Here's an example of what I'm looking for with regard to labeling: treemap:

Notice that the labels get truncated by the boundaries of the containing tiles.

That particular example is implemented using <div> tags, which have this behaviour by default. But I'm using SVG <rect> and I'm hoping there is a more straight-forward way of doing this than a separate clip path defining another rect shape.

Answer 1

You could wrap each <rect> element in an <svg> element of the same width/height. By default overflow is hidden on inner <svg> elements.