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

187

11 сентября 2018, 23:50

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

Вот мой код:

 <svg viewBox="0 0 101 101">  
      <defs>  
       <linearGradient id="Gradient1">  
        <stop offset="0" style="stop-color:#0070d8"></stop>  
        <stop offset="0.5" style="stop-color:#2cdbf1"></stop>  
        <stop offset="1" style="stop-color:#83eb8a"></stop>  
       </linearGradient>  
       </defs>  
     <path d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90" fill-  
      opacity="1" stroke-width="1" style="stroke-dasharray: 282.783,  
      282.783;stroke-dashoffset: 62.783;transition: 0.5s all;stroke:  
      url(#Gradient1);fill: none;"></path>  
    </svg>

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

Answer 1

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

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

2 * 3.14 * 45 = 282.6px

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

<animate attributeName="stroke-dashoffset" dur="4s" values="282.6;0" begin="svg2.click" fill="freeze" />
Фоновую картинку лучше размещать внутри файла svg. В этом случае она будет адаптивна и верстка не сломается при изменении размеров окна браузера.

<image xlink:href="https://i.stack.imgur.com/DKgXe.jpg" width="100%" height="100%" />

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

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

<div class="container" > 
<svg id="svg2" viewBox="0 0 101 101" >  
  <defs>  
   <linearGradient id="Gradient1">  
    <stop offset="0" style="stop-color:#0070d8"></stop>  
    <stop offset="0.5" style="stop-color:#2cdbf1"></stop>  
    <stop offset="1" style="stop-color:#83eb8a"></stop>  
   </linearGradient>  
   </defs>  
    
   <image xlink:href="https://i.stack.imgur.com/DKgXe.jpg" width="100%" height="100%" /> 
 <path d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"  stroke-dasharray="282.6"  
  stroke-dashoffset="282.6"> 
   
   <animate attributeName="stroke-dashoffset" dur="4s" values="282.6;62.783" begin="svg2.click" fill="freeze" />  
  </path>  
</svg>  
</div>

Я сделал, как у вас на картинке - непоную прорисовку круга.
Поэтому 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); 
}

<div class="container" > 
<svg id="svg2" viewBox="0 0 101 101" >  
  <defs>  
   <linearGradient id="Gradient1">  
    <stop offset="0" style="stop-color:#0070d8"></stop>  
    <stop offset="0.5" style="stop-color:#2cdbf1"></stop>  
    <stop offset="1" style="stop-color:#83eb8a"></stop>  
   </linearGradient>  
   </defs>  
    
   <image xlink:href="https://i.stack.imgur.com/DKgXe.jpg" width="100%" height="100%" /> 
 <path d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"  stroke-dasharray="282.6"  
  stroke-dashoffset="282.6"> 
   
   <animate attributeName="stroke-dashoffset" dur="4s" values="282.6;0" begin="svg2.click" repeatCount="indefinite" />  
  </path>  
</svg>  
</div>

Решение 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; 
  } 
 }

<div class="container" > 
<svg id="svg2" viewBox="0 0 101 101" >  
  <defs>  
   <linearGradient id="Gradient1">  
    <stop offset="0" style="stop-color:#0070d8"></stop>  
    <stop offset="0.5" style="stop-color:#2cdbf1"></stop>  
    <stop offset="1" style="stop-color:#83eb8a"></stop>  
   </linearGradient>  
   </defs>  
    
   <image xlink:href="https://i.stack.imgur.com/DKgXe.jpg" width="100%" height="100%" /> 
   <path d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"   
    
  </path>  
</svg>  
</div>

Answer 2

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Позиционирование div (не получается)

Имеются три div блокаВыровнял по линии их с помощью display: inline-block

202

HTML

Заливка текста svg выходит за границы символа

Подскажите, пожалуйста, в чем проблема (или я что-то не понимаю)Есть SVG

182

HTML

Атрибут value у input

Возможно ли использовать два значения в атрибуте value у тега input? Если да, то возможно ли их парсить отдельно друг от друга с помощью js?

222

HTML

Получение хэша для виджета записей вк через js и html

Дело в том, что чтобы вставить себе виджет на сайт нужно получить hash записи, а вот он получается только на этом сайте: https://vkcom/dev/Post И сделать...

190