SVG图形的圆角化处理

Question

我使用了一个生成矩形Treemap的包，其结构如下：

• svg（包裹元素，宽度为100%，高度为100%）
  • svg（Treemap的外部矩形，宽度和高度也均为100%）
    • g（每个Treemap节点都有一个）
      • rect
      • clipPath
      • text

我需要给整个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的结合作用?

- nstuyvesant

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>

- web-tiki

---

这是一个很简单的解决方案。在Safari中可以很好地运行，但是Google Chrome似乎不能显示带有边框半径的SVG。也许是最新版Chrome的一个bug？ - nstuyvesant

@nstuyvesant，我刚在Chrome上测试了我的示例，它可以正常运行。你测试的是什么代码？ - web-tiki

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>

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

该路径是使用此代码生成的（来源：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))

- nstuyvesant