Плавная прорисовка svg?

338

01 декабря 2017, 03:47

Хочу сделать плавную прорисовку 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>

Answer 1

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

Answer 2

Многие, видимо из-за примеров Криса Койера на 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>

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

Все вопросы

ТОП-10

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

VisualStudio 2015 не видит провайдер mySQL

Пытаюсь подключиться к MySQLУстановил пакеты MySQL

320

MySQL

MySQL репликация

Есть два MySQL сервера в разных зданиях, время от времени в них пишутся данныеНеобходимо сделать, чтоб на каждом из них можно было получить актуальные...

257

MySQL

Как вытащить результат из запроса MySql в php

В запросе такого типа:

297

MySQL

MYSQL select с интервалами времени

Добрый день! Помогите, пожалуйста, оптимизировать запросНужно сделать выборку с интервалом по часу например, из таблицы со звонками телефонными...

263