圆化 SVG 的角

Question

我正在使用生成具有以下结构的矩形 Treemap 的包：

svg（宽度=100% 高度=100% 的包装纸）
- svg（Treemap的外矩形，也是width=100% and height=100%）
  - g（每个树图节点一个）
    - 矩形
    - 剪辑路径
    - 文本

我需要 将整个 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 的组合？

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

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

圆化 SVG 的角

Rounding the corners of an SVG

html

css

svg

clip-path