Заливка объекта снизу-вверх

#javascript #html #css #svg #анимация

Как на SVG создать круглый бордюр с заливкой от низа к верху.

Ниже, как это реализовано с помощью CSS: 



$('input[type="range"]').bind('change mousemove',function(){
  $('.border-bg').height($(this).val()+'%');
});
.border {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  overflow: hidden;
  background: rgba(255,0,0,.25);
  position: relative;
}

.border::after {
  content: '';
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 10px;
  background: #fff;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.border-bg {
  display: block;
  width: 100%;
  height: 30%;
  background: red;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
}



  










Доп. вопрос:
Как использовать не только бордюр, а допустим слой-маску.
    

Ответы

Ответ 1

Изначально красный круг скрыт маской, роль которой выполняет прямоугольник, полностью
перекрывая круг.
При движении маски вверх постепенно показывается освободившаяся часть круга, создавая
иллюзию рисования. 



.container{
width:50%;
height:50%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
mask:url(#msk1);
}








Применение масок очень мощный и гибкий инструмент, меняя всего один атрибут можно
легко реализовать различные варианты рисования 

Рисование сверху вниз
Вместо значения - values="0;-200" устанавливаем values="0;200"  



.container{
width:50%;
height:50%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
mask:url(#msk1);
}








Слева- направо 

В этом случае будем анимировать координату "x" прямоугольника маски 

  




.container{
width:50%;
height:50%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
mask:url(#msk1);
}








Движение в левую сторону 



.container{
width:50%;
height:50%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
mask:url(#msk1);
}






Ответ 2

Использование stroke-dasharray

Все привыкли к стандартному использованию рисования  из  начала или конца отрезка
 в сторону увеличения или уменьшения линии.  

Поэтому понять сразу, как можно использовать этот атрибут для одновременного рисования
из одной точки в разные стороны, довольно сложно.   Начнём с самых простых основ. 

Допустим у нас окружность R="90px" Длина окружности будет равна  C=2πr = 2 * 3.14
* 90 ≈ 565.2 

Половина окружности равна 565,2 / 2 ≈ 282.6  


stroke-dasharray="282.6 282.6"  первая цифра длина черты (полокружности), вторая
цифра пробел  




.container{
width:100%;
height:100%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
}

#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}







Пока всё понятно - первая половина окружности закрашена, вторая пробел 


Теперь установим stroke-dasharray="282.6 0"

Первая половина окружности закрашивается, вторая половина окружности пропускается,
снова закрашивается половина окружности, это уже вторая половина и снова пропуск. В
итоге закрашивается вся окружность.   




.container{
width:100%;
height:100%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
}

#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}








Теперь установим stroke-dasharray="0 282.6"  

Первая половина окружности, где должна быть черта пропускается, вторая половина окружности,
где должен быть пробел пропускается. В итоге вся окружность не окрашена. 



.container{
width:100%;
height:100%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
}

#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}





  


Используя эти данные напишем формулу анимации при которой окружность будет заполняться
из одной точки в разные стороны: 

 
     
      


Ниже полный код заполнения слева-направо  



.container{
width:100%;
height:100%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
}

#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}






   

Сверху-вниз



.container{
width:100%;
height:100%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
}

#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}








Справа - налево



.container{
width:100%;
height:100%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
}

#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}








Снизу - вверх



.container{
width:100%;
height:100%;
}

#crc1{
fill:none;
stroke:red;
stroke-width:10;
}

#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}