<style>
.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>

<svg class="mysvg" width="200" height="200">
	<rect id="Rect" x="10" y="10" width="100" height="100" rx="8" ry="18"></rect>
</svg>
<svg class="mysvg" width="200" height="200">
	<path id="cPath" d="M10 100 H190"></path>
</svg>
<div id="pathMsg"></div>

<script>

let createPath = (eRect) => {
	let x = 1 * eRect.getAttribute('x'),
		y = 1 * eRect.getAttribute('y'),
		w = 1* eRect.getAttribute('width'),
		h = 1* eRect.getAttribute('height'),
		rx = 1 * eRect.getAttribute('rx') || 0,
		ry = 1 * eRect.getAttribute('ry') || 0;
		console.log(rx,ry);
	return (rx === 0 || ry === 0) ?
		`M${x} ${y} h${w} v${h} h-${w} v-${h}` :
		`M${x} ${y + ry}
		a${rx} ${ry} 0 0 1 ${rx} -${ry}
		h${w - rx * 2}
		a${rx} ${ry} 0 0 1 ${rx} ${ry}
		v${h - ry * 2}
		a${rx} ${ry} 0 0 1 -${rx} ${ry}
		h-${w - rx * 2}
		a${rx} ${ry} 0 0 1 -${rx} -${ry}
		v-${h - ry * 2}`;
};

cPath.setAttribute('d',createPath(Rect));
pathMsg.innerText = createPath(Rect);

</script>