7

Есть готовый файл, сохраненный в SVG.
Задача следующая, при наведение сделать его анимированным. Суть анимации: рисования элемента от начала до конца. Я полазил по интернету и нашел подходящий пример анимации:

$(document).ready(function() {

  var canvas = Snap('.main-svg');
  var speed = 1000;
  var line_clients = canvas.path('M349.333,397.333c0,0,46,42.667,146-2.333 c17.917-8.063,79.666-31,87.333,65');
  line_clients.attr({
    class: "line-clients"
  });
  var group_line = canvas.group(line_clients);

  group_line.attr({
    fill: 'none',
    stroke: '#fff',
    strokeWidth: 0
  });


  $.each([line_clients], function(index, value) {
    value.attr({
      strokeDasharray: value.getTotalLength(),
      strokeDashoffset: value.getTotalLength(),
      strokeWidth: 1,
      stroke: '#000'
    });

    value.animate({
        strokeDashoffset: 0
      },
      speed * 2,
      mina.easeinout
    );
  });
});

Только вот, когда открываешь мой SVG, я не ожидал, что там столько текста ради такой линии.
Я не прошу за себя сделать работу, но может кто-то пнет меня на нужный источник, а лучше пример.
Находил цент, какой с svg конвертирует в JS. Но я либо не разобрался, либо там нет возможности анимации.

5
  • а в чем вопрос-то? пример есть, svg есть. Что-то не работает или как?
    – Grundy
    24 июн 2016 в 10:01
  • @Grundy, в файл загляни - там жесть.
    – Qwertiy
    24 июн 2016 в 10:07
  • @Qwertiy, ну вроде ж руками с этим и не надо разбираться :)
    – Grundy
    24 июн 2016 в 10:09
  • @Grundy, есть набор абсолютно позиционированных штрихов произвольной формы в сомнительном порядке (первые 3 вообще принадлежат разным поворотам). Вопрос: как ты собираешься определить, где должен оказаться штрих при сдвиге на 1 шаг? Это наш мозг достраивает картину до пунктирной линии, в svg никакой информации об этом нет. А если и есть, то надо очень сильно постараться, чтобы её оттуда извлечь.
    – Qwertiy
    24 июн 2016 в 10:15
  • Можно анимировать и «это»: приблизительно нарисовать поверх свою кривую толстой линией цвета фона, закрывающей оригинал. И постепенно её скрывать по событию наведения мыши.
    – Sergiks
    24 июн 2016 в 10:34

4 ответа 4

7

Решение SVG + Mask

Трудности с анимацией рисования с помощью пунктирной линии вызваны тем, что пунктирная линия заполняет всю длину линии или path.

Поэтому бесполезно пытаться повторить технику рисования, как это делается сплошной линией с помощью изменения stroke-dashoffset (отступа линии от начала) от максимума длины линии до нуля.

Линия заполнена полностью, поэтому она будет просто бежать:

.path {
  
  stroke-dashoffset: 1490;
  animation: dash 12s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 width="746px" height="500px" viewBox="0 0 746 500"  >
	 
  <path class="path" fill="none"  stroke-dasharray="8 24"  stroke="#000000" stroke-width="4" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20"/> 

</svg>

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

var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_stroke.beginElement();
})
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 width="100%" height="100%" viewBox="0 0 746 500"  >
	 <defs>
	 <mask id="msk1">
      <path class="path" fill="none" stroke="white" stroke-dasharray="0,1489" stroke-dashoffset="0" stroke-width="4" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20">
	     <animate id="an_stroke" attributeName="stroke-dasharray" begin="indefinite" dur="10s" values="0,1489;1489,0" fill="freeze" repeatCount="indefinite" />
	 </path>
	 </mask>
</defs>
  <path class="path" fill="none" mask="url(#msk1)" stroke-dasharray="4 8" stroke-dashoffset="0" stroke="#000000" stroke-width="4" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20"/>  
	<text x="100" y="180" font-size="24" fill="dodgerblue" >Click me</text>

</svg>

  • У атрибута stroke-dasharray может быть несколько пар параметров. Используя это свойство можно получить интересный эффекты:

stroke-dasharray="4 8 36 4", где 4 - черта, 8 - пробел, 36 - черта, 4 - пробел

var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_stroke.beginElement();
})
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 width="100%" height="100%" viewBox="0 0 746 500"  >
	 <defs>
	 <mask id="msk1">
      <path class="path" fill="none" stroke="white" stroke-dasharray="0,1489" stroke-dashoffset="0" stroke-width="4" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20">
	     <animate id="an_stroke" attributeName="stroke-dasharray" begin="indefinite" dur="8s" values="0,1489;1489,0" fill="freeze" repeatCount="indefinite" />
	 </path>
	 </mask>
</defs>
  <path class="path" fill="none" mask="url(#msk1)" stroke-dasharray="4 8  36 4" stroke-dashoffset="0" stroke="#000000" stroke-width="4" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20"/>  
	<text x="100" y="180" font-size="24" fill="dodgerblue" >Click me</text>

</svg>

Рисование из одной точки двумя прерывистыми линиями

var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_str.beginElement();
})
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 width="746px" height="500px" viewBox="0 0 746 500"  >
	 <defs>
	 <mask id="msk1">
	    
      <path class="path" fill="none" stroke="white" stroke-dasharray="0 745 0 745" stroke-dashoffset="0" stroke-width="4" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20">
	     <animate id="an_str" attributeName="stroke-dasharray" dur="10s" values="0 745 0 745; 0 0 1490 0" fill="freeze" begin="indefinite" />
	 </path>
	 </mask>
</defs>
  <path class="path" fill="none" mask="url(#msk1)" stroke-dasharray="4 8" stroke-dashoffset="0" stroke="#000000" stroke-width="4" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20"/> 
	
	 <circle cx="135" cy="203" r="5" fill="red" /> 
	 <text x="100" y="180" font-size="24" fill="dodgerblue" >Click me</text>

</svg>

.container {
width:75%;
height:75%;
}
<div class="container">
<svg  viewBox="0 0 120 120">
	
<defs>
	 <mask id="msk1">
      <circle class="maskCircle" cx="25" cy="25" r="20" fill="none" stroke="white" stroke-width="5" stroke-dashoffset="-31.4" stroke-dasharray="0,62.8;0, 62.8">
	   <!-- анимация рисования черточек -->  
		 <animate
		   attributeName="stroke-dasharray"
		   begin="background.mouseover"
		   end="background.mouseout"
		   dur="3s"
		   values="0, 62.8 0, 62.8;0,0 125.6,0"
		   fill="freeze"
		   repeatCount="1"
		   restart="whenNotActive" /> 
       <!-- анимация стирания черточек --> 	  
	  <animate
	     attributeName="stroke-dasharray"
		 begin="background.mouseout"
		 dur="1s"
		 values="0,0 125.6,0;0, 62.8 0, 62.8"
		 fill="freeze"
		 repeatCount="1"
		 restart="whenNotActive" />
	 </circle>
	 </mask>
	
    <pattern id="image" x="0%" y="0%" height="100%" width="100%">
      <image x="-2.8" y="0" width="38%" height="38%" opacity="0.1" xlink:href="https://i.stack.imgur.com/EyUuX.jpg">
	   <!-- анимация увеличения прозрачности изображения при наведении -->
	   <animate id="an1"
	     attributeName="opacity"
		 begin="background.mouseover"
		 dur="4s"
		 values="0.05;1"
		 fill="freeze" /> 
      <!-- анимация уменьшения прозрачности изображения при убирании курсора-->	  
	  <animate
	     attributeName="opacity"
		 begin="background.mouseout"
		 dur="1s"
		 to="0.05"
		 fill="freeze" />  
	  
	  </image>
    </pattern>
   
</defs> 
    <g id="gr1">
	   <circle id="background" cx="25" cy="25" r="20" fill="url(#image)" stroke="#E4E4E4" stroke-width="5" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="5"
		stroke-dasharray="1.57" stroke-dashoffset="20"  mask="url(#msk1)">
		
		</circle>
	</g>  
	
	 
</svg>
</div>

<div class="container">
<svg  viewBox="0 0 120 120">
	
<defs>
	 <mask id="msk1">
      <circle class="maskCircle" cx="25" cy="25" r="20" fill="none" stroke="white" stroke-width="5" stroke-dashoffset="125.6" stroke-dasharray="125.6">
	   <!-- анимация рисования черточек -->  
		 <animate
		   attributeName="stroke-dashoffset"
		   begin="background.mouseover"
		   end="background.mouseout"
		   dur="3s"
		   values="125.6;0"
		   fill="freeze"
		   repeatCount="1" /> 
       <!-- анимация стирания черточек --> 	  
	  <animate
	     attributeName="stroke-dashoffset"
		 begin="background.mouseout"
		 dur="1s"
		 values="0;125.6"
		 fill="freeze"
		 repeatCount="1" />
	 </circle>
	 </mask>
	
    <pattern id="image" x="0%" y="0%" height="100%" width="100%">
      <image x="5" y="3" width="29%" height="29%" opacity="0.1" xlink:href="https://i.stack.imgur.com/acozx.jpg">
	   <!-- анимация увеличения прозрачности изображения при наведении -->
	   <animate id="an1"
	     attributeName="opacity"
		 begin="background.mouseover"
		 dur="4s"
		 values="0.05;1"
		 fill="freeze" /> 
      <!-- анимация уменьшения прозрачности изображения при уводке курсора-->	  
	  <animate
	     attributeName="opacity"
		 begin="background.mouseout"
		 dur="1s"
		 to="0.05"
		 fill="freeze" />  
	  
	  </image>
    </pattern>
   
</defs> 
    <g id="gr1">
	   <circle id="background" cx="25" cy="25" r="20" fill="url(#image)" stroke="#E4E4E4" stroke-width="5" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="5"
		stroke-dasharray="1.57" stroke-dashoffset="20"  mask="url(#msk1)">
		
		</circle>
	</g>  
	
	 
</svg>
</div>

Крайний пример взят отсюда

4
  • извините что не по теме скажите почему для удобства общения не вводят смайлики ?
    – user354190
    3 ноя 2019 в 15:51
  • @user354190 я даже на задумывался над этим.. мне вполне хватает скобок для выражения положительных и отрицательных эмоций 3 ноя 2019 в 15:55
  • 1
    ясно спасибо за ответ и потраченное время
    – user354190
    3 ноя 2019 в 15:55
  • спасибо большое ...
    – user354190
    3 ноя 2019 в 16:08
6

Рисовать в любом случае придётся. Эту линиую надо изобразить заново одним путём. Далее варианта два.

  1. использовать оригинальный кривой и ужасный SVG. Поверх накрыть его своей линией цвета фона, толщины достаточной, чтобы закрыть полностью. Потом анимировать длину штриха и подобрать смещение так, чтобы кривая поверх «скрывалась», открывая пунктир под ней. Ниже эта техника подробнее.

  2. если требуется рисовать сплошной линией – можно изобразить прорисовку одного длинного пути, меняя длину штриха (решение отсюда). Пришлось перерисовать путь, чтобы он стал одной кривой. Смотрите в полный экран, т.к. кривая крупная.

.path {
  stroke-dasharray: 1490;
  stroke-dashoffset: 1490;
  animation: dash 4s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 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"
	 width="746px" height="482px" viewBox="0 0 746 482" enable-background="new 0 0 746 482" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M158,462.5h105.5c36.175,0,65.5-29.575,65.5-65.75
	s-29.263-65.375-65.438-65.375L84,331c-35.346,0-64-28.403-64-63.75c0-35.346,28.654-63.75,64-63.75h578
	c35.346,0,63.5-28.903,63.5-64.25V20"/>
</svg>


Чтобы «рисовать» пунктиром можно сразу нарисовать весь путь пунктиром, а потом поверх закрыть этой же кривой цвета фона. И её не рисовать, а наоборот, скрывать задом наперёд той же техникой, как в первом коде. Пример с прорисовкой пунктирной окружности (отсюда):

<svg width="400" height="400" viewBox="0 0 400 400" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="1,6" stroke-width="1"  stroke="red" fill="white" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200 " stroke-width="3" stroke-dashoffset="0" stroke="white" fill="none">
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>

2
  • animate - caniuse.com/#feat=svg-smil - deprecated, будет удалена из браузеров. Ну либо подключать полифилл.
    – Qwertiy
    24 июн 2016 в 10:31
  • я предлагаю ТС использовать CSS3 свойство animate (в первом фрагменте кода). Указанный вами deprecated "animate" – лишь в примере с окружностями, которые сразу рисуются. ТС, вероятно, захочет включать анимацию через JS, назначая элементу класс с CSS-свойством.
    – Sergiks
    24 июн 2016 в 10:33
4

Вероятно, оторвать руки тому, кто этот svg сделал, и переписать на пунктирную линию из прямых и дуг. В этом svg не линия - там каждый штришок сделан отдельным замкнутым контуром из кривых безье - всё это чудо объединено в один path. Думаю, ни у кого нет ни малейшего желания это анимировать.

введите сюда описание изображения

По идее, должно получиться svg из следующего набора команд:

M ... v ... a ... h ... a ... h ... a ... h ...
1
  • @Alexandr_TT, внезапно))
    – Qwertiy
    3 ноя 2019 в 19:54
3

Решение SVG + Mask + JS

Можно использовать пунктирную линию в качестве маски для анимированной линии.

// Получить идентификатор элемента <path> и длину <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// Начальная позиция анимации
myline.style.strokeDasharray = length;

// Скройте треугольник, смещая черту. Удалите эту линию, чтобы показать треугольник перед прокруткой
myline.style.strokeDashoffset = length;

// Найти процент прокрутки при прокрутке (используя свойства кросс-браузера) и сместить тире столько же, сколько и процент прокрутки
window.addEventListener("scroll", myFunction);

function myFunction() {
  // What % down is it?
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Длина для смещения тире
  var draw = length * scrollpercent;

  // тирайте рисунок (при прокрутке вверх)
  myline.style.strokeDashoffset = length - draw;

  //Получить точку
  endPoint = myline.getPointAtLength(draw);
  circle.setAttribute("cx", endPoint.x);
  circle.setAttribute("cy", endPoint.y);

}
body {
  height: 2000px;
  background: #f1f1f1;
}

#circle {
  fill: red;
}

#mySVG {
  position: fixed;
  top: 15%;
  width: 100vw;
  height: 100vh;
  margin-left: -50px;
}

.st0 {
  fill: none;
  stroke-dashoffset: 3px;
  stroke: red;
  stroke-width: 5;
  stroke-miterlimit: 10;
  stroke-dasharray: 20;
}

.mask-style {
  stroke: white;
  stroke-width: 7;
}
<h2>Прокрутите это окно, чтобы нарисовать  путь..</h2>
<p>Scroll  назад, чтобы повернуть рисунок</p>

<svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible">
  <defs>
    <mask id="dash-mask">
      <path class="st0 mask-style" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />
    </mask>
  </defs>
  <circle id="circle" cx="10" cy="10" r="10"/>
  <path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" mask="url(#dash-mask)"/>
  Извините, ваш браузер не поддерживает SVG
</svg>

2
  • Привет Саша ..что такое endPoint.x ? 7 ноя 2019 в 19:22
  • @MaximLensky Привет Имя переменной endPoint = myline.getPointAtLength(draw); 7 ноя 2019 в 19:25

Ваш ответ

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

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