преобразовать SVG в css форму - PullRequest
Новая
       17

преобразовать SVG в css форму

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

Я пытаюсь сделать это "круговое яйцо" в css, и оно не работает со мной.

У меня этот круг как SVG, и я хочу использовать его на своем веб-сайте и разместить изображение внутри него с использованием Pattern и Image для размещения изображения внутри svg не работало со мной, потому что я не могу контролировать размер фона и повторять. 

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="115" height="120"><defs><path id="a" d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z"/></defs><use fill="#00C1B1" fill-rule="evenodd" transform="translate(-33)" xlink:href="#a"/></svg>

поэтому я решил сделать это изображение, используя css

Обратите внимание на верхний левый угол Круг 

.circle{
  margin-top:50px;
  margin-left:50px;
  background-color:#00C1B1;
  border-radius: 70% 50% 60% 60% / 70% 70% 55% 60%;
  height: 120px;
  width:115px;
}
<div class="circle">
</div>

Я пытался поиграть с радиусом границы, но, похоже, у меня это не работает.

Спасибо

1 Ответ

2 голосов
/ 27 мая 2020

Используйте SVG как маску, и вы легко сможете рассмотреть фон. Просто убедитесь, что правильно настроили viewBox SVG: 

.box {
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>') center/contain no-repeat;
   width:200px;
   display:inline-block;
   background:red;
}
/* to maintain the ratio */
.box::before {
   content:"";
   display:inline-block;
   padding-top:100%;
}


svg {
  border:1px solid;
}
<div class="box"></div>

<div class="box" style="background:url(https://i.picsum.photos/id/1000/800/800.jpg) center/cover;width:150px;"></div>

<div class="box" style="background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;width:100px"></div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>
...