如何在 SVG 路径上添加边框半径（javascript）[重复]答案

【问题标题】：how to add border radius on SVG path (javacsript) [duplicate]如何在 SVG 路径上添加边框半径（javascript）[重复]
【发布时间】：2022-02-18 01:12:21
【问题描述】：

我可以使用一些帮助来设置 rectangle 每一边的边框半径。这是当前代码矩形 svg 路径标签

`M0,53H415.4285583496094V57H0V53Z`

我想给矩形的每个角一个圆角。这怎么可能？我无法正确应用边界半径。我已经尝试使用 SVG 路径生成器，但仍然不明白如何使用它来制作这样的边界半径

【问题讨论】：

您是否尝试使用 SVG 路径生成器？
我做到了，但仍然不明白如何使用它来制作这样的边界半径

标签： svg

【解决方案1】：

<path> 元素的角不能真正具有半径。您当然可以通过定义合适的曲线段（d 属性中的C 和S）来生成任何类型的圆角路径。或者，您可以将 <path> 替换为 <rect> 元素，就像我在下面的 sn-p 中所做的那样。我将高度更改为数量的 10 倍，以使半径为 4 的舍入成为可能

<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>

【讨论】：

【解决方案2】：

您不能在 <path> 元素上应用边框半径。
但是可以设置为<rect>primitives. See Mdn Docs: rect。

您可以通过rx 和ry 属性定义边框半径：

<rect x="0" y="53" width="415.43" height="4" rx="2" ry="2"  />

如果您需要将矩形转换为路径元素，可以使用pathdata polyfill by Jarek Foksa

// convert rect to path
let rect = document.querySelector('rect');
let rectPath = rect.getPathData({normalize:true})

{normalize:true} 将返回一个路径命令数组，仅使用一组减少的命令类型（M、L、C、Z - 使用绝对坐标）。
此选项还可用于将矩形、圆形、多边形、线等图元转换为路径 d 数据。因此，您必须创建一个新的路径元素，并将检索到的路径数据设置为新路径的 d 属性。

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>

【讨论】：