Question

这是一个简化的代码剪切，我在svg中有一个动画路径但由于某种原因onend事件在webkit中无效...：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     xml:space="preserve" viewBox="0 0 990 700" preserveAspectRatio="xMidYMid meet">
  <script type="text/ecmascript">
     <![CDATA[
      function animComlete(){
         console.log("animation over");
      }
     ]]>
  </script>
<style>
 .tekst { 
      fill:none;
      stroke:black;
      stroke-width:2px;
      stroke-linecap:round;
    }
    .one {stroke-dasharray:3000,3000;}
</style>
<g>
    <path fill="none" stroke="#FFFFFF" class='tekst one' stroke-miterlimit="10" id="str" d="M938.338,358.089c1.951,0.534,3.277,0.838,5.625,0.989
        c2.543,0.163,15.277,0.916,15.277,0.916s12.738,0.774,15.283,0.916c2.35,0.131,3.682-0.016,5.652-0.313
        c-1.957-0.535-3.285-0.838-5.633-0.99c-2.543-0.162-15.279-0.916-15.279-0.916s-12.732-0.773-15.275-0.915
        C941.641,357.646,940.309,357.789,938.338,358.089z"/>
        <animate onend="animComlete()" attributeName="stroke-dashoffset" from="3000" to="10" dur="10s" begin="0s" />
</g>
</svg>

任何想法在这里有什么不对...也许一些解决方法......似乎这是webkit特定的错误

SVG onend事件在webkit中不起作用

0 个答案: