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 that you have read and understand our privacy policy and code of conduct.

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