Как сделать радиус окружности у этих углов?

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

Я использую svg path. Мне нужно,чтобы была возможность  отрегулировать длину svg.   

Вот мой код: 



 




Мне надо закруглить эти края. Как мне это сделать?


    

Ответы

Ответ 1

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

При минимальном значении -stroke-dashoffset="0" -линия будет полностью нарисована.
 При радиусе окружности  45px вашего патча полная длина окружности будет равна - 

2 * 3.14 * 45 = 282.6px    


Изменяя значения от 282.6px до нуля можно анимировать прорисовку
линии.

 
Фоновую картинку лучше размещать внутри файла svg. В этом случае она
будет адаптивна и верстка не сломается при изменении размеров окна
браузера.   

     


Анимация линии -  клик по картинке   



.container {
width:50%;
height:50%;
}
svg path {
 stroke-linecap:round;
 stroke-width:5;
 fill-opacity:0.5;
 fill:none;
 stroke: url(#Gradient1);
}

 





Я сделал, как у вас на картинке - непоную прорисовку круга.
 Поэтому stroke-dashoffset изменяется от максимального значения 282.6; до промежуточного
62.783   Это параметр -  values="282.6;62.783"   

Для полной прорисовки круга необходимо задать values="282.6;0  



.container {
width:50%;
height:50%;
}
svg path {
 stroke-linecap:round;
 stroke-width:5;
 fill-opacity:0.5;
 fill:none;
 stroke: url(#Gradient1);
}

 





Решение CSS

Принцип действия тот же,- анимация атрибута stroke-dashoffset.    

Но атрибуты патча и правила реализующие анимацию перенесены в CSS    

stroke-dasharray:282.6;
  stroke-dashoffset:282.6;
  animation:dash 5s ease-in forwards;
   }
  @keyframes dash {
  0% { 
   stroke-dashoffset:282.6;
  }
  100% {
    stroke-dashoffset:0;
  }




.container {
width:50%;
height:50%;
}
svg path {
 stroke-linecap:round;
 stroke-width:5;
 fill-opacity:1;
 fill:none;
 stroke: url(#Gradient1);
 stroke-dasharray:282.6;
  stroke-dashoffset:282.6;
  animation:dash 5s ease-in forwards;
   }
   
  @keyframes dash {
  0% { 
   stroke-dashoffset:282.6;
  }
  100% {
    stroke-dashoffset:0;
  }
 }        

 



Ответ 2

Нужно добавить атрибут stroke-linecap="round" в патч.