Адаптивный клип-путь SVG - PullRequest
Новая
       74

Адаптивный клип-путь SVG

1 голос
/ 07 мая 2020

Я пытаюсь замаскировать элемент с помощью SVG, используя свойство css clip-path, как это изображение.

enter image description here

Ожидаемое состоит в том, что круг в top-left, top-right ... имеет фиксированный размер (например, 20 пикселей), но размер SVG совпадает с размером контейнера.

Если размер контейнера фиксированный, clipPath будет 

<clipPath
  d="M20 0
  A20 20 0 0 1 0 20
  V180
  A20 20 0 0 1 20 200
  H180
  A20 20 0 0 1 200 180
  V20
  A20 20 0 0 1 180 0
  Z" />

Если размер контейнера auto, а clipPath добавляет clipPathUnits="objectBoundingBox", размер круга не будет фиксированным.

Так что мне делать?

1 Ответ

0 голосов
/ 07 мая 2020

Вы можете построить его, используя CSS, и сохранить тот же размер для ваших кругов: 

.box {
  width:200px;
  height:200px;
  margin:5px;
  background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;
  -webkit-mask:
    radial-gradient(circle 20px at top    left ,transparent 97%,#fff 100%) top    left,
    radial-gradient(circle 20px at top    right,transparent 97%,#fff 100%) top    right,
    radial-gradient(circle 20px at bottom left ,transparent 97%,#fff 100%) bottom left,
    radial-gradient(circle 20px at bottom right,transparent 97%,#fff 100%) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
  mask:
    radial-gradient(circle 20px at top    left ,transparent 97%,#fff 100%) top    left,
    radial-gradient(circle 20px at top    right,transparent 97%,#fff 100%) top    right,
    radial-gradient(circle 20px at bottom left ,transparent 97%,#fff 100%) bottom left,
    radial-gradient(circle 20px at bottom right,transparent 97%,#fff 100%) bottom right;
  mask-size:51% 51%;
  mask-repeat:no-repeat;
}
<div class="box">

</div>

<div class="box" style="width:400px;">

</div>

С некоторыми CSS переменными, чтобы легко справиться с этим: 

.box {
  --r:20px; /*radius of the circle */
  
  width:200px;
  height:200px;
  margin:5px;
  background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;
  
  --g:transparent 97%,#fff 100%;
  -webkit-mask:
    radial-gradient(circle var(--r) at top    left ,var(--g)) top    left,
    radial-gradient(circle var(--r) at top    right,var(--g)) top    right,
    radial-gradient(circle var(--r) at bottom left ,var(--g)) bottom left,
    radial-gradient(circle var(--r) at bottom right,var(--g)) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
  mask:
    radial-gradient(circle var(--r) at top    left ,var(--g)) top    left,
    radial-gradient(circle var(--r) at top    right,var(--g)) top    right,
    radial-gradient(circle var(--r) at bottom left ,var(--g)) bottom left,
    radial-gradient(circle var(--r) at bottom right,var(--g)) bottom right;
  mask-size:51% 51%;
  mask-repeat:no-repeat;
}
<div class="box">

</div>

<div class="box" style="width:400px;--r:40px">

</div>
...