Линия с круговым отступом

#css #html5 #css3 #анимация #svg

Помогите разобраться, как сделано сердце с отступом вокруг него. Как получить такую же
изогнутую линию? Это возможно с помощью CSS, HTML?     

Я знаю, как добавить сердце с помощью CSS или картинки, но как добиться изогнутой
границы вокруг него?   

Похоже, border-radius здесь не поможет...  



Перевод вопроса: Line with indented circle  @hermann
    

Ответы

Ответ 1

Конечно же, border-radius поможет. Но придётся подбирать размеры вложенных блоков
и согласовывать толщину границ с толщиной линий в иконках. 

CSS


Круг помещаем псевдоэлементом в блок с overflow:hidden;. Получаем дугу.
Сердечко берём из Font Awesome. Чтобы задать иконку через стили, создаём ещё один
блок с псевдоэлементом. Если бы сердечко не выступало за нижнюю границу дуги и ему
не грозил бы добавленный нами overflow:hidden;, то мы поместили бы оба пседоэлемента
в один блок.
Позиционируем собранный блок поверх картинки с нижней рыжей границей. Даём отрицательный
bottom, чтобы опуститься на ширину границы. 


https://codepen.io/glebkema/pen/MoyXxp



.arch {
  overflow: hidden;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.arch:before {
  background: white;
  border: solid 3px orange;
  border-radius: 50%;
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 133.333333%;
}

.heart {
  position: absolute; bottom: -3px; right: 60px;
  width: 48px; height: 36px;
}
.heart:after {
  color: orange;
  content: '\f08a'; /* http://fontawesome.io/icon/heart-o/ */
  display: block;
  font-family: 'FontAwesome';
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  position: absolute; bottom: -4px; left: 0;
  text-align: center;
  width: 100%;
}

.photo {
  background: #9cf;
  border-bottom: solid 3px orange;
  height: 120px;
  position: relative;
}





Ответ 2

Вот идея о том, как вы можете реализовать этот макет с помощью inline svg.    

SVG :


Первый path - это круговая линия с отступом. Вырезанная окружность
создается с помощью команды дуги (arc)   
Второй элемент path - это само сердце. Патч использует команду
кривой Безье для верхней части сердца.   




img {
  width: 100%;
  display: block;
}
div {
  position: relative;
  height: 100px;
  background: #fff;
}
svg {
  position: absolute;
  bottom: 100%;
  width: 100%;
}


  





Дополнительные сведения о командах path в SVG см. тут и тут.



Перевод ответа @web-tiki.


Ответ 3

SVG + Анимация

Три последовательных анимации:


Рисование изогнутой линии вокруг сердца
Рисование контура сердца
Заполнение цветом


Первые две анимации реализованы с помощью изменения атрибута патча stroke-dashoffset
от максимального значения до нуля, тем самым реализован эффект рисования линии.   

Для точного вычисления длины пути линии и контура сердца применяем команду JS getTotalLength()  





  

  
   
 
   



   

Для изогнутой линии длина получилась равной 128px Для контура сердца =26px   

Подставляем эти значения в анимацию атрибута stroke-dashoffset.    

Начало анимации - click по треугольнику в правом нижнем углу    



img {
  width: 100%;
  display: block;
}
div {
  position: relative;
  height: 100px;
  background: #fff;
}
svg {
  position: absolute;
  bottom: 100%;
  width: 100%;


   
    




Похожие темы: 


Анимировать по очереди SVG Path
Как нарисовать дугу на svg для сайта?
Cоздать круглую стрелку с использованием только HTML и CSS?
Линия до и после текста над картинкой
Тайна вырезания контура в фигуре SVG