Переполнение SVG в Edge не видно - PullRequest
Новая
       29

Переполнение SVG в Edge не видно

0 голосов
/ 01 апреля 2019

Я столкнулся с проблемой в Edge при применении border-radius и отступов к встроенному svg. В этой конкретной комбинации нижняя часть SVG обрезана и не может быть показана с помощью overflow: visible. На следующем изображении показан результат в Edge:

svg edge cut off

Я настроил базовый пример, иллюстрирующий поведение здесь:

https://next.plnkr.co/edit/IIuU109SfZNJFDb8

Пример кода для воспроизведения: 

<!doctype html>
<html>
  <head>
    <style>
     svg {
      border: 1px solid black;
      border-radius: 50%;
      padding: 40px;
      overflow: visible;
     }
    </style>
  </head>

  <body>
   <svg width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
  </body>
</html>

Есть ли шанс заставить переполнение работать в Edge так же, как в Chrome или Firefox?

1 Ответ

1 голос
/ 01 апреля 2019

Я бы удалил отступы и для компенсации изменил бы viewBox="-20 -10 240 240"

     svg {
      border: 1px solid black;
      border-radius: 50%;
      overflow: visible;
     }
<svg viewBox="-20 -10 240 240" width="240" >
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
...