Показать сообщение отдельно
  #5 (permalink)  
Старый 18.12.2017, 13:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,309

jquery animate svg
smart-create,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
  function a() {
    $({offset:100}).delay(400).animate({offset:0}, {duration:2000, step:function(a, b) {
      $(".data_gradient").attr(b.prop, a + "%");
    }, complete:a});
  }
  a();
});
  </script>
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 1642 352" xml:space="preserve">
<path class="st0" d="M1011.8,345.1L955,288.4H458.8c-2-8.7-9.9-15.2-19.2-15.2c-10.9,0-19.7,8.8-19.7,19.7  c0,10.9,8.8,19.7,19.7,19.7c10.2,0,18.7-7.8,19.6-17.8h493.1l56.8,56.8H1641v-6.4H1011.8z M439.7,306.2c-7.3,0-13.3-6-13.3-13.3  c0-7.3,6-13.3,13.3-13.3c7.3,0,13.3,6,13.3,13.3C452.9,300.2,447,306.2,439.7,306.2z"/>
<path class="st1" d="M979,279l-59.7-59.7H683.5c-1.5-6-6.8-10.4-13.3-10.4c-7.5,0-13.7,6.1-13.7,13.7c0,7.5,6.1,13.7,13.7,13.7  c6.4,0,11.8-4.5,13.3-10.4h233.2l59.7,59.7H1641V279H979z M670.2,229.8c-4,0-7.2-3.2-7.2-7.2c0-4,3.2-7.2,7.2-7.2  c4,0,7.2,3.2,7.2,7.2C677.4,226.5,674.2,229.8,670.2,229.8z"/>
<path class="st2" d="M956,318.4l-54-54h-64.4v1.3c0-2.8-2.3-5.1-5.1-5.1c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1  c2.8,0,5.1-2.3,5.1-5.1v1.3H901l54,54h686v-2.6H956z"/>
<path class="st3" d="M1641,251h-619.9c-0.6-2.2-2.6-3.8-4.9-3.8c-2.8,0-5.1,2.3-5.1,5.1c0,2.8,2.3,5.1,5.1,5.1c2.4,0,4.4-1.7,5-3.9  H1641V251z"/>
<path class="st4" d="M1026.1,301.3l-52.8-52.8H761c-3.5,0-6.4-2.9-6.4-6.4l0,0H752v14h2.6v0c0-3.5,2.9-6.4,6.4-6.4h211.8l52.8,52.8  H1641v-1.3H1026.1z"/>
<polygon class="st5" points="962.1,222.9 937.7,198.5 806.7,198.5 806.7,195.5 801.6,195.5 801.6,204.1 806.7,204.1 806.7,201.1   936.6,201.1 961.1,225.5 1641,225.5 1641,222.9 "/>
<path class="test st6" fill="url(#linear-gradient)" d="M1009.1-0.1l-56.8,56.8H715.4c-1-10-9.4-17.8-19.6-17.8c-10.9,0-19.7,8.8-19.7,19.7c0,10.9,8.8,19.7,19.7,19.7  c9.3,0,17.1-6.5,19.2-15.2h240l56.8-56.8H1641v-6.4H1009.1z M695.8,71.8c-7.3,0-13.3-6-13.3-13.3s6-13.3,13.3-13.3  c7.3,0,13.3,6,13.3,13.3S703.1,71.8,695.8,71.8z"/>
<path class="st7" d="M976.3,71.1l-59.7,59.7H763.3c-1.5-6-6.8-10.4-13.3-10.4c-7.5,0-13.7,6.1-13.7,13.7c0,7.5,6.1,13.7,13.7,13.7  c6.4,0,11.8-4.5,13.3-10.4h156L979,77.6h662v-6.4H976.3z M750.1,141.2c-4,0-7.2-3.2-7.2-7.2c0-4,3.2-7.2,7.2-7.2  c4,0,7.2,3.2,7.2,7.2C757.3,138,754.1,141.2,750.1,141.2z"/>
<path class="st8" d="M905.4,35.6l-54,54h-80.8c-0.6-2.2-2.6-3.9-5-3.9c-2.8,0-5.1,2.3-5.1,5.1c0,2.8,2.3,5.1,5.1,5.1  c2.4,0,4.4-1.6,5-3.9h81.9l54-54H1641v-2.6H905.4z"/>
<path class="st9" d="M1641,102.9h-551.1c-0.6-2.2-2.6-3.9-5-3.9c-2.8,0-5.1,2.3-5.1,5.1c0,2.8,2.3,5.1,5.1,5.1  c2.4,0,4.4-1.6,4.9-3.8H1641V102.9z"/>
<polygon class="st10" points="1641,203.4 987.5,203.4 987.5,200 984.9,200 984.9,208.1 987.5,208.1 987.5,204.7 1641,204.7 "/>
<polygon class="st11" points="1054.2,131 1029.8,155.5 870.4,155.5 870.4,152.5 865.2,152.5 865.2,161 870.4,161 870.4,158   1030.9,158 1055.3,133.6 1641,133.6 1641,131 "/>
<polygon class="st12" points="1641,153.8 1090,153.8 1090,151.2 1084.8,151.2 1084.8,159.8 1090,159.8 1090,156.4 1641,156.4 "/>
<path class="st13" d="M1641,174.3H19.9c-1.4-4.1-5.2-7-9.7-7c-5.7,0-10.3,4.6-10.3,10.3c0,5.7,4.6,10.3,10.3,10.3c4.5,0,8.3-3,9.7-7  H1641V174.3z"/>
<linearGradient id="linear-gradient">
    <stop class="data_gradient" offset="100%" stop-color="transparent"></stop>
    <stop class="data_gradient" offset="100%" stop-color="gold"></stop>
  </linearGradient>
</svg>
</body>
</html>
Ответить с цитированием