border-radius用于屏蔽子SVG

Posted 2021-03-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了border-radius用于屏蔽子SVG相关的知识，希望对你有一定的参考价值。

我有一个svg孩子的div：

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

我正在尝试使用CSS获得圆角。但是，如果我在div上设置border-radius它不会掩盖SVG。这有点意义，但有一个简单的选择吗？

答案

也许您可以使用以下代码：

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

希望这可以帮到你。

另一答案

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

svg {
  border-radius: 50px;
}

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

以上是关于border-radius用于屏蔽子SVG的主要内容，如果未能解决你的问题，请参考以下文章