5

Хочу сделать плавную прорисовку svg при загрузке страницы, но проблема в том, что круги разные (на скриншотах показано, что нужна разная длина линии), не знаю какое-свойство нужно анимировать при загрузке страницы.

http://prntscr.com/hgvqjf и http://prntscr.com/hgvqq5

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 378 381" style="enable-background:new 0 0 378 381;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#003D90;stroke-width:2;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="189" cy="190.5" r="183"/>
</svg>

2 ответа 2

3

Многие, видимо из-за примеров Криса Койера на css-tricks ставят stroke-dasharray="1000" Когда это срабатывает, а когда и нет. Дело в том, что надо точно вычислять длину анимированной линии. Например для круга с радиусом 100px длина окружности будет - 2*3.14*100= 628px Вот это расчетное значение и надо подставлять в stroke-dasharray и stroke-dashoffset.

Решение SVG

Анимация начинается при наведении курсора

<svg id="svg2" width="400" height="400" viewBox="0 0 400 400">

  <circle  id="back" cx="120" cy="120" r="100" fill="none" stroke="#d5d5d5" stroke-width="5"/>
  <circle transform="rotate(-90 120 120)" id="shape" cx="120" cy="120" r="100" stroke-width="5" stroke-dasharray='628' stroke-dashoffset='628' stroke="red" fill="none">
  <animate attributeName="stroke-dashoffset" from="628" to="0" dur="4s" begin="svg2.mouseover" restart="whenNotActive" />
  </circle>
  
</svg>

Решение CSS

Всё уносится в стили, в svg остаются только окружности.

#back{
stroke:red;
stroke-width:5;
fill:none;
stroke:#d5d5d5;

}
#shape {
stroke-dashoffset:628;
stroke-dasharray:628;
stroke:red;
stroke-width:5;
fill:none;
animation: circle_stroke 4s ease-in forwards;
}
@keyframes circle_stroke {
    0% {
    stroke-dashoffset: 628;
    }
    100% {
    stroke-dashoffset: 0;
      }
    } 
<svg id="svg2" width="400" height="400" viewBox="0 0 400 400">
  <circle  id="back" cx="120" cy="120" r="100" />
  <circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100"  />

</svg>

Половина окружности

Повторю принцип рисования линии с нуля до полной длины: при уменьшении stroke-dashoffset от максимального значения (628) до нуля, линия будет рисоваться от нуля до полной длины. Но нам надо закрасить только половину окружности, поэтому будем уменьшать stroke-dashoffset от 628px до 314px

<style>

#shape {
stroke-dashoffset:314;
stroke-dasharray:628;
stroke:red;
stroke-width:5;
fill:none;
animation: circle_stroke 4s ease-in forwards;
}
@keyframes circle_stroke {
    0% {
    stroke-dashoffset: 628;
    }
    100% {
    stroke-dashoffset: 314;
      }
    } 

</style>
<svg id="svg2" width="400" height="400" viewBox="0 0 400 400">
    <circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100"  />

</svg>

1
  • 1
    @YourDeveloper Для четверти окружности - stroke-dashoffset от 628px до 157px Commented 30 нояб. 2017 в 6:58
2

stroke-dasharray and stroke-dashoffset https://codepen.io/MaffooBristol/pen/zKwoAZ

2
  • А как сделать, если я хочу, чтоб в конце окружность выглядела так prnt.sc/hgvqq5 ? Commented 29 нояб. 2017 в 16:58
  • Нужно рассчитать правильно dash-offset, а также кругу надо задать поворот на -90 градусов (чтобы начинать рисовать с северной точки, а не восточной) Commented 29 нояб. 2017 в 17:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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