9

Вот так должны выглядить края

Я использую 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>

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

Вот так должны выглядить края

2 ответа 2

13

Длина в этом случае регулируется атрибутом 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>

1
  • Как всегда.....
    – Air
    10 дек 2018 в 17:56
5

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

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.