Блог

я новичок в анимации svg. И я хотел бы работать с vivus.js . Я настроил среду тестирования. И скачал svg отсюда:https://www.svgimages.com/hand.html Я пытался анимировать его, но это не сработало, но когда я заменяю его образцом svg, это работает. Есть помощь?

  <div class="section matrix">
      <div class="content">
        <div class="box box-50">
          <p>
            This should display the obturateur SVG like on the demo page. The strokes must be orange. The element must remain an <i>object</i> tag.
          </p>
          <button onclick="this.textContent=(document.querySelector('object#obt')?'Pass!':'Failed.')">Test</button>
        </div><div class="box box-50">
          <object id="obt" data="hand.svg" type="image/svg xml" style="width: 100%; max-height: 250px;"></object>
        </div>
      </div>
    </div>

    <script>

      // Display warning message if not on http server
      if (window.location.protocol === 'file:') {
        var configIntro = document.getElementById('config-instructions');
        configIntro.style.display = 'block';
      }

      // Obturateur
      var obt1 = new Vivus('obt', {
        type: 'delayed',
        duration: 150
      });

      // polaroid-dynamic
      var polaroidD = new Vivus('polaroid-dynamic', {
        file: 'polaroid.svg',
        type: 'scenario-sync',
        duration: 20
      });

      var hiD = new Vivus('hi-dynamic', {
        file: 'hi-there.svg',
        type: 'scenario-sync',
        duration: 20,
        start: 'manual'
      });

      var synthD = new Vivus('synth-dynamic', {
        file: 'synth.svg',
        type: 'oneByOne',
        duration: 200,
        start: 'manual',
        animTimingFunction: Vivus.EASE_IN
      });

      function easeOutBounce (x) {
        var base = -Math.cos(x * (0.5 * Math.PI))   1;
        var rate = Math.pow(base,1.5);
        var rateR = Math.pow(1 - x, 2);
        var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) ))   1;
        return (1- rateR)   (progress * rateR);
      }

    </script>