Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
vivus.js与任何svg一起工作吗?_Svg_Vivus - Fatal编程技术网

vivus.js与任何svg一起工作吗?

vivus.js与任何svg一起工作吗?,svg,vivus,Svg,Vivus,我是svg动画新手。我想和vivus.js一起工作。 我已经建立了测试环境。并从此处下载了一个svg: 我曾尝试为它设置动画,但它不起作用,但当我用示例svg替换它时,它就起作用了。有什么帮助吗 <div class="section matrix"> <div class="content"> <div class="box box-50"> <p> This should

我是svg动画新手。我想和vivus.js一起工作。 我已经建立了测试环境。并从此处下载了一个svg: 我曾尝试为它设置动画,但它不起作用,但当我用示例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>


这将在演示页面上显示闭孔SVG。笔划必须是橙色。元素必须保持为对象标记。

试验 //如果不在http服务器上,则显示警告消息 如果(window.location.protocol==='文件:'){ var configIntro=document.getElementById('config-instructions'); configIntro.style.display='block'; } //闭孔的 var obt1=新生命(‘obt’{ 类型:“延迟”, 持续时间:150 }); //宝丽来动态 var Polarioidd=新的Vivus(‘Polarioid-dynamic’{ 文件:“polarioid.svg”, 键入:“场景同步”, 持续时间:20 }); var hiD=新的Vivus(“高动态”{ 文件:'hi there.svg', 键入:“场景同步”, 持续时间:20, 开始:“手动” }); var synthD=新的活体('synth-dynamic'{ 文件:“synth.svg”, 键入:“一个接一个”, 持续时间:200, 开始:“手动”, 动画功能:Vivus.EASE\u IN }); 函数easeOutBounce(x){ var base=-Math.cos(x*(0.5*Math.PI))+1; var率=数学功率(基数为1.5); var rateR=数学功率(1-x,2); var进度=-Math.abs(Math.cos(rate*(2.5*Math.PI))+1; 回报率(1-评分员)+(进度*评分员); }