圆角 SVG答案 - 爱码网

【问题标题】：Rounding the corners of an SVG圆角 SVG
【发布时间】：2022-02-10 21:40:33
【问题描述】：

我正在使用一个包来生成具有这种结构的矩形 Treemap：

svg（宽度=100% 和高度=100% 的包装器）
- svg（Treemap 的外部矩形，宽度=100% 和高度=100%）
  - g（每个 Treemap 节点一个）
    - 矩形
    - 剪辑路径
    - 文字

我需要围绕整个 Treemap 的四个角（而不是每个矩形的 rx ry）。

是否可以通过创建一个 clipPath 作为包装器的子级或定义圆角矩形的内部 svg 来做到这一点？如果是这样，它可以暴露 svg 后面的任何背景颜色吗？

更新： @web-tiki - 代码如下...

<svg width="100%" height="100%" style="border-radius: 4px;">
  <svg width="100%" height="100%">
  <!-- ... -->

在 Safari 和 Firefox 上看起来很棒，但 Chrome 似乎忽略了它。想知道它是不是 Carbon Charts Treemap 和 Chrome 的组合？

【问题讨论】：

标签： html css svg clip-path

【解决方案1】：

最简单的解决方案可能是在 svg 包装器元素上使用 border-radius CSS 属性。它将允许您剪辑 svg 元素上的圆角并显示 svg 背后的背景颜色。这是一个例子：

body {
  background: darkorange;
}

#wrapper {
  display: block;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  border:10px solid pink;
}

<svg id="wrapper" viewBox="0 0 100 100">
  <svg>
    <rect fill="teal" x="0" y="0" width="100" height="100"/>
   </svg>
</svg>

顺便说一句，您还可以将整个 svg 包装在一个 div 中，并在该 div 上应用 border-radius，如下所示：

body {
  background: darkorange;
}

#wrapper {
  border-radius: 50px;
  overflow: hidden;
  border: 10px solid pink;
}

<div id="wrapper">
  <svg viewBox="0 0 100 100">
    <svg>
      <rect fill="teal" x="0" y="0" width="100" height="100"/>
     </svg>
  </svg>
</div>

【讨论】：

这样一个简单的解决方案。这在 Safari 中运行良好，但谷歌浏览器似乎没有显示带有边框半径的 svg。也许是最新版 Chrome 中的错误？
@nstuyvesant 我刚刚在 chrome 上测试了我的示例，它工作正常。你测试了什么代码？

【解决方案2】：

发现我可以将其添加到包装器 svg 以获得我想要的效果：

<defs>
  <clipPath id="smallBox">
    <path d="M 0 4 A 4 4 0 0 1 4 0 L 446 0 A 4 4 0 0 1 450 4 L 450 346 A 4 4 0 0 1 446 350 L 4 350 A 4 4 0 0 1 0 346 Z"/>
  </clipPath>
</defs>

然后将style="clip-path: url(#smallBox);" 添加到内部svg。

路径是用这段代码生成的（来源：https://gist.github.com/danielpquinn/dd966af424030d47e476）

const roundedRect = (w, h, r) => 
    'M 0 ' + r
    + ' A ' + r + ' ' + r + ' 0 0 1 ' + r + ' 0'
    + ' L ' + (w - r) + ' 0'
    + ' A ' + r + ' ' + r + ' 0 0 1 ' + w + ' ' + r
    + ' L ' + w + ' ' + (h - r)
    + ' A ' + r + ' ' + r + ' 0 0 1 ' + (w - r) + ' ' + h
    + ' L ' + r + ' ' + h
    + ' A ' + r + ' ' + r + ' 0 0 1 0 ' + (h - r)
    + ' Z'

console.log(roundedRect(450,350,4))

【讨论】：