html - 圆化 SVG 的 Angular

Question

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

• svg(宽度为 100% 且高度为 100% 的包装器)
  • svg(树状图的外矩形，同样是 width=100% 和 height=100%)
    • g(每个 TreeMap 节点一个)
      • 正交
      • 剪辑路径
      • 文本

我需要将整个 Treemap 的四个 Angular 圆化(不是其中每个矩形的 rx ry)。

是否可以通过创建 clipPath 作为包装器的子项或定义圆 Angular 矩形的内部 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 元素上的圆 Angular 并显示 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>