Percentage units in nested <svg> is not resolved relative to the inner <svg> before emitting into the output SVG

[festim-prebreza]

In cases such as this:
<div>
<svg class="small">
<circle cx="50%" cy="50%" r="50%" class="svg-circle"/>
</svg>
</div>
the circle does not calculate its width relative to its parent class "small", but relative to window I think

[felixfbecker]

Yeah, this is because <svg>s are inlined. There would need to be logic added here to handle various elements and their horizontal and vertical attributes and resolve them relative to the viewPort, similar to how it's already done for percentages in presentation attributes (which are resolved relative to the diagonal of the viewBox).

dom-to-svg/src/svg.ts

Lines 128 to 134 in a9309e4

	if (isSVGGraphicsElement(element)) {
	copyGraphicalPresentationAttributes(styles, elementToAppend, svgViewportElement.viewBox.animVal)
	if (isSVGTextContentElement(element)) {
	copyTextStyles(styles, elementToAppend)
	}
	}