how to add border radius on SVG path (javacsript) [duplicate] - svg

Question

This question already has answers here:
SVG rounded corner
(15 answers)
Closed last year.
I could use a little help with setting border-radius on each side of rectangle . Here’s the current code rectangle svg path tag
`M0,53H415.4285583496094V57H0V53Z`
I want to give the each corner of the rectangle a rounded shape. How is it possible?
I am not able to apply like border radius properly. I already try using SVG path generator, but still not really understand how to use that to make such a border radius on that

Answer 1

You can't apply a border radius on a <path> element.
But it can be set for <rect> primitives. See Mdn Docs: rect.
You would define the border radius via rx and ry properties:
<rect x="0" y="53" width="415.43" height="4" rx="2" ry="2" />
If you need to convert to convert a rect to a path element, you could use the pathdata polyfill by Jarek Foksa
// convert rect to path
let rect = document.querySelector('rect');
let rectPath = rect.getPathData({normalize:true})
{normalize:true} will return an array of path commands using only a reduced set of command types (M, L, C, Z – with absolute coordinates).
This option can also be used to convert primitives like rect, circle, polygon, line etc. to path d data. So you will have to create a new path element an set the retrieved pathdata to the new path's d attribute.
let path = document.querySelector('path')
//let bb = path.getBBox()
//console.log(bb)
let rect = document.querySelector('rect');
// convert rect to path
let rectPath = rect.getPathData({
normalize: true
})
let newSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
newSvg.setAttribute('viewBox', '0 0 415.43 100');
let rectPathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
rectPathEl.setPathData(rectPath)
document.body.appendChild(newSvg);
newSvg.appendChild(rectPathEl);
console.log(rectPathEl.getAttribute('d'))
svg {
display: block;
width: 30em
}
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill#1.0.3/path-data-polyfill.js"></script>
<p>Path </p>
<svg viewBox="0 0 415.43 100">
<path d="M0,53 H415.4285583496094 V57 H0 V53 Z" />
</svg>
<p>Rect </p>
<svg viewBox="0 0 415.43 100">
<rect x="0" y="53" width="415.43" height="4" rx="2" ry="2" />
</svg>
<p>Rect converted to path</p>

Answer 2

A <path> element cannot really have radii at its corners. You can of course generate any kind of rounded path by defining suitable curve segments (C and S in the d attribute). Alternatively you can replace the <path> by a <rect> element, as I have done in the following snippet. I changed the height to 10 times the amount in order to make the rounding with a radius of 4 possible
<svg viewbox="0 0 500 100" fill="none" stroke="black">
<rect x="0" y="53" width="415.4286" height="40" rx="4" ry="4">
</svg>