пограничный радиус для маскировки дочернего SVG

Question

У меня есть div с дочерним элементом svg:

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

Я пытаюсь получить закругленные углы, используя CSS.Однако, если я установлю border-radius на div, он не замаскирует SVG.Это имеет смысл, но есть ли простая альтернатива?

Answer 1

Вы можете поставить border-radius на SVG.

svg {
  border-radius: 50px;
}

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

Answer 2

Может быть, вы можете использовать этот код ниже:

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

Надеюсь, это поможет вам.