4

Подскажите, пожалуйста, есть ли возможность добиться эффекта, так называемой растущей кривой, реализуемый изменением значения stroke-dashoffset с polyline объектом.

Приведу пример

.st1 {
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
}
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
  <symbol id="myLine">

    <polyline points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol>

  <use xlink:href="#myLine" class="st1" />
</svg>

Желательно средствами CSS

3 ответа 3

6

Для любого объекта, имеющего атрибут stroke-dashoffset, можно получить эффект рисования линиями. То есть для всех фигур svg: line, circle, ellipse, polygon, polyline, path. Необходимо только точно вычислить длину этой линии. В вашем случае длина линии -136px

Ниже код утилиты для точного вычисления длины <polyline>
Для вычисления длины другой polylineнеобходимо скопировать значения points

  <input  type="button" value="Total"  onclick="TotalLength()"/>
 <div>  
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
     width="500" height="500" viewBox="0 0 500 500" > 
 
         <polyline id="check" fill= "none" stroke ="grey" stroke-width ="1" 
         
		 points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
</svg>
</div> 
   <script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Длина пути - " + len);
        };
  </script>

#myLine{
fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
}
@keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 } 
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 60 200 200">
  <symbol id="myLine">

    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol>

  <use xlink:href="#myLine" class="st1" />
</svg>

Добавлю ещё два варианта:

#1. Вариант с заготовкой пути

Это серый путь, по которому пойдет анимация рисования линии.
Используется та же линия, что и в первом примере, но она неподвижна. (id="shadow")
Анимируется ее дубликат -id="#myLine".

#myLine{
fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 4s ease-in 1s forwards;
}
#shadow{
   fill: none;
  stroke: #EAEAEA;
  stroke-width: 4;
  stroke-miterlimit: 10;
   
}
@keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 } 
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 65 200 200">
  <symbol id="myLine">

    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol> 
   <symbol id="shadow">

    <polyline   points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  />
  </symbol>
  <use xlink:href="#shadow"  />
  <use xlink:href="#myLine"  />
  
</svg>

#2. Вариант с анимацей тени

Для получения тени клонируется первая линия и сдвигается вправо и вниз на несколько пикселей

 <symbol id="shadow">
    <polyline  transform="translate(1 0.5)" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  />
  </symbol>         

анимация линий выполняется совместно и реализуется точно также, как в самом верхнем, основном примере для одной линии:

#myLine{
fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
}
#shadow{
   fill: none;
  stroke: grey;
  stroke-width: 4;
  stroke-miterlimit: 10;
stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
  opacity:0.5;
  
}
@keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 } 
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 65 200 200">

   <symbol id="shadow">
    <polyline  transform="translate(1 0.5)" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"  />
  </symbol>
  
  <symbol id="myLine">
    <polyline  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" />
  </symbol> 
  
  <use xlink:href="#shadow"  />
  <use xlink:href="#myLine"  />
  
</svg>

4

Приведение анимаций CSS и SVG

Этот ответ на вопрос, создаю специально для тех, кто владеет приемами анимации CSS, но пока не решается освоить анимацию SVG для расширения своих возможностей.
Всё познается в сравнении.
Взят пример анимации CSS из первого ответа и я преобразую его в анимацию SMIL SVG

В основе эффекта рисования линии в обоих видах анимации (css и svg) лежит один и тот же прием - использование атрибута stroke-dashoffset - отступ от начала линии.
Когда максимальный отступ равен длине линии, то она полностью скрыта.
Уменьшая stroke-dashoffset от максимального значения, в нашем случае - 136px до нуля, мы тем самым реализуем эффект рисования, появления линии.

SVG очень гибко и мощно работает со стилями,- делая анимацию SMIL, вы можете, как привыкли, внести stroke-dasharray,stroke-dashoffset в таблицу стилей или разместить стили прямо непосредственно в команде SVG.

   <polyline id="myLine"  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" 
 style="fill:none; stroke-width:4; stroke: #000; stroke-dasharray:136; stroke-dashoffset:136;"/>         

Остается понять, как преобразовать анимацию CSS, в smil

Для CSS команда уменьшения stroke-dashoffset от 136px до нуля выглядит следующим образом:

#myLine{
 stroke-dasharray:136;
  stroke-dashoffset:136;
  animation:dash 5s ease-in forwards;
  } 
  @keyframes dash {
  0% { 
   stroke-dashoffset:136;
  }
  100% {
    stroke-dashoffset:0;
  }
 }        

Для SVG smil аналогичная команда записывается так:

 <animate attributeName="stroke-dashoffset" from="136" to="0" dur="5s" fill="freeze" />

вот, когда эти два способа (css, svg) рядом, то в принципе и так всё понятно. Добавлю лишь, что параметрforwards css делает тоже самое, что fill="freeze" svg - изображение по окончанию анимации замораживается на экране.

Ниже полный пример анимации smil svg

<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 60 200 200">
   
    <polyline id="shadow"  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" style="fill:none; stroke-width:4; stroke: #EAEAEA; opacity:0.5;"  />
     
    <polyline id="myLine"  points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" style="fill:none; stroke-width:4; stroke: #000; stroke-dasharray:136; stroke-dashoffset:136;"  >
	<animate  
    attributeName="stroke-dashoffset"
    from="136"
    to="0"
    dur="5s"
    fill="freeze" />
    </polyline>
  
</svg>

2

Иногда полезно узнать длину в рантайм, для этого в современных браузерах у polyline есть метод SVGGeometryElement.getTotalLength(), полученное таким образом значение устанавливаем в stroke-dasharray первым аргументом, обозначающим длину штриха. вторым параметром идет размер между штрихами.

 line.setAttribute('stroke-dasharray', line.getTotalLength() + ' 10000');

Анимация получается за счет встроенной интерполяции при добавлении в css transition: 1s

<svg viewbox="0 0 500 500" style="border: 1px solid">
<text x="20" y="40">Click anywhere to add point</text>
<polyline></polyline>
</svg>

<script>

let svgNs = "http://www.w3.org/2000/svg";
let svg = document.querySelector('svg');
let line = document.querySelector('polyline');
let pt = svg.createSVGPoint(), pts = [];

svg.addEventListener('click', function(e) {

    pt.x = e.clientX;
    pt.y = e.clientY;
    var cur =  pt.matrixTransform(svg.getScreenCTM().inverse());
    pts.push([cur.x, cur.y]);
    
    let c = document.createElementNS(svgNs, 'circle');
    c.setAttribute('cx', cur.x);
    c.setAttribute('cy', cur.y);
    svg.appendChild(c);
    
    setTimeout(() => c.classList.add('show'), 1);

    line.setAttribute('points', pts.map(pt => pt.join(',')).join(' '));
    line.setAttribute('stroke-dasharray', line.getTotalLength() + ' 10000');
   
});
</script>

<style>

circle {
  fill: none;
  stroke: black;
  transition: 300ms;
  opacity: 0;
  r:1;
}

circle.show {
  opacity: 1;
  r:10;
}

text {
  user-select:none;
  font-size:30px;
}

polyline {
  fill:none;
  stroke: red;
  stroke-width:3;
  transition: 1s;
  transition-timing-function: ease-in;
}

</style>


Кросс-браузерный вариант, со времен когда у polyline не было встроенного метода для того чтобы узнать длину.

let polyline = document.querySelector("polyline");
let totalLength = [...polyline.points].reduce((acc, i) => {
  if (acc.prev) 
    acc.len += Math.sqrt(Math.pow((i.x - acc.prev.x), 2) + 
                         Math.pow((i.y - acc.prev.y), 2));
  acc.prev = i;
  return acc
}, {len: 0}).len;

console.log('total length:', totalLength);
polyline {
  fill:none;
  stroke: red;
  stroke-width:3;
}
<svg viewBox="0 0 500 500" >
<polyline points="37.31343460083008,47.761192321777344 144.776123046875,14.925373077392578 238.05970764160156,58.208953857421875 335.8208923339844,20.149253845214844"></polyline></svg>

4
  • у polyline не было возможности узнать длину. немного не понял, что имелось ввиду. Добавил утилиту, для вычисления длины polyline Commented 28 апр. 2019 в 9:12
  • 1
    @Alexandr_TT раньше не было метода getTotalLength у polyline Commented 28 апр. 2019 в 9:18
  • мне кажется, что нужно заменить в твоем ответе stroke-dasharray на stroke-dashoffset Commented 28 апр. 2019 в 9:34
  • тогда немного подругому надо сделать, тут я анимирую именно значение размера штриха а не отступ Commented 28 апр. 2019 в 9:36

Ваш ответ

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

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