遮罩子SVG的边界半径

Question

我有一个带svg子级的div：

<div>
  <svg>...</svg>
</div>

我正在尝试使用CSS来解决问题。但是，如果我在div上设置了border-radius，它不会掩盖SVG。有点道理，但是有一个简单的替代方法吗？

Answer 1

也许您可以在下面使用此代码：

.clip-circle {
  clip-path: circle(50px at center);
}

希望这可以为您提供帮助。

Answer 2

您可以将border-radius放在SVG上。

svg {
  border-radius: 50px;
}

<div>
  <svg width="400" height="300">
    <rect width="100%" height="100%" fill="green"/>
  </svg>
</div>