Text may be clipped when not using original font

[Fabian Schwarzkopf]

When not using the original font, the text may be clipped by an existing clip-path element.

Repro

<svg xmlns="http://www.w3.org/2000/svg" width="110px" height="90px" viewBox="0 0 110 90" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; display: block; width: 110px; height: 90px;">
	<rect width="110px" height="90px" fill="white"/>
	<clipPath id="ygc159_0">
		<rect x="25" y="25" width="60" height="40"/>
	</clipPath>
	<g clip-path="url(#ygc159_0)">
		<g style="pointer-events:visiblePainted" transform="translate(61.5 268.5)" image-rendering="auto" shape-rendering="auto">
			<g style="box-sizing:initial;">
				<g>
					<path d="M -31.5,-238.5 L 18.5,-238.5 L 18.5,-208.5 L -31.5,-208.5 Z" stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" fill="rgb(210,222,238)" fill-opacity="1"/>
				</g>
				<g transform="translate(-31.5 -238.5)">
					<text font-family="Arial" font-size="12px" font-style="normal" font-weight="normal" text-decoration="none" text-anchor="middle" fill="rgb(0,0,0)" fill-opacity="1" dy="0.9166666666666666em" transform="translate(25 8)">Hello World</text>
				</g>
			</g>
		</g>
	</g>
	<defs/>
</svg>

Results in

This is because the clip-path is not adjusted in any way although the replaced font-family (by default 'Comic Sans MS, cursive') needs more space.

[Fabian Schwarzkopf]

Adjusting the clipPath doesn't look like a promising approach. Although we know to which elements the clipPath is applied, adjusting its geometry is not a good idea as it may affect different elements simultaneously. In the mentioned snippet, the same clipPath is applied to the text and the other path element, although we just want to adjust it for the text.

I think it is more reasonable to scale down the text with the custom font to fit the original boundaries instead.

[Johannes Rössel]

Could we perhaps do something vaguely evil and try getting the locations of each glyph? SVG allows us to place each of them at a different x offset, perhaps that can be read as well? That way we could follow the original font's metrics more closely. Admittedly, the default choice of Comic Sans was mostly because it coincided very closely with Arial's metrics, which just happens to work out in many yFiles graphs.

Ooh, indeed, we could: https://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getExtentOfChar

Along with getRotationOfChar we could perhaps place each glyph in the exact same location and size as the original. Might look funny in some cases, but at least the metrics are identical then, so we don't get text that overflows a bounding shape or gets clipped accidentally.

[Fabian Schwarzkopf]

Tried to apply a transform on the element to scale the text's bounding box to match the input bounding box. This did not work well wrt. text placement, particularly with nested tspans that apply different coordinates.

What seems to work better is to adjust the font-size until the bounding box is smaller than the input bounding box (41e4dd2).

Placing glyphs explicitly may work as well, did not try it though.