舍入SVG的拐角

Question

我正在使用一个包，它生成一个具有以下结构的矩形树状图：

• svg (带width=100%和height=100%的包装器)
  • svg (树地图的外部矩形，也是width=100%和height=100%)
    • g (每个树状地图节点一个)
      • rect
      • clipPath
      • text

​

我需要在整个树状地图的四个角落(而不是每个rect的ry )。

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

更新：@web下面是代码的样子.

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

在Safari和Firefox上看起来很棒，但是Chrome似乎忽略了它。想知道这是否是碳图、树状图和Chrome的组合？

Answer 1

最简单的解决方案可能是在svg包装器元素上使用border-radius CSS属性。它将允许您在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))