Question

我使用svgcircus.com创建了一个动画，如果我将它放在网页中，动画不会播放，只看到没有动画的静态svg但是如果我将SVG直接拖放到浏览器中则会播放：

以下是我的称呼方式：

<img src="marker-with-wave.svg"/>

这是我的SVG：

<?xml version="1.0" standalone="no"?>
<!-- Generator: SVG Circus (http://svgcircus.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle id="actor_4" cx="50" cy="50" r="25" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_3" cx="50" cy="50" r="20" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_2" cx="50" cy="50" r="15" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_1" cx="50" cy="50" r="10" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<g transform="translate(20 -1020)">
    <path style="fill:#00A0A0;" d="M30,1043.4c-5.523,0-10,4.477-10,10c0,1.776,0.477,3.438,1.289,4.882
        c0.135,0.24,0.276,0.476,0.43,0.704L30,1073.4l8.281-14.414c0.127-0.189,0.237-0.389,0.351-0.586l0.079-0.118
        c0.811-1.445,1.289-3.106,1.289-4.882C40,1047.877,35.522,1043.4,30,1043.4z M30,1048.4c2.761,0,5,2.239,5,5c0,2.761-2.239,5-5,5
        c-2.761,0-5-2.239-5-5C25,1050.639,27.239,1048.4,30,1048.4z"/>
    <path style="fill:#008282;" d="M30,1047.15c-3.452,0-6.25,2.798-6.25,6.25c0,3.451,2.798,6.25,6.25,6.25
        c3.451,0,6.25-2.799,6.25-6.25C36.25,1049.948,33.451,1047.15,30,1047.15z M30,1049.65c2.071,0,3.75,1.679,3.75,3.75
        s-1.679,3.75-3.75,3.75s-3.75-1.679-3.75-3.75S27.929,1049.65,30,1049.65z"/>
</g>
<script type="text/ecmascript"><![CDATA[(function(){var actors={};actors.actor_1={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_1"),type:"circle",cx:50,cy:50,dx:20,dy:32,opacity:1};actors.actor_2={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_2"),type:"circle",cx:50,cy:50,dx:30,dy:30,opacity:1};actors.actor_3={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_3"),type:"circle",cx:50,cy:50,dx:40,dy:30,opacity:1};actors.actor_4={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_4"),type:"circle",cx:50,cy:50,dx:50,dy:30,opacity:1};var tricks={};tricks.trick_1=(function(_,t){t=(function(n){return--n*n*n+1})(t)%1,t=0>t?1+t:t;var i;i=0.00>=t?1+(0.5-1)/0.00*t:t>=0.13?0.5-(t-0.13)*((0.5-1)/(1-0.13)):0.5;var a=_._tMatrix,r=-_.cx*i+_.cx,x=-_.cy*i+_.cy,c=a[0]*i,n=a[1]*i,M=a[2]*i,f=a[3]*i,g=a[0]*r+a[2]*x+a[4],m=a[1]*r+a[3]*x+a[5];_._tMatrix[0]=c,_._tMatrix[1]=n,_._tMatrix[2]=M,_._tMatrix[3]=f,_._tMatrix[4]=g,_._tMatrix[5]=m});tricks.trick_2=(function(t,i){i=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(i)%1,i=0>i?1+i:i;var _=t.node;0.1>=i?_.setAttribute("opacity",i*(t.opacity/0.1)):i>=0.2?_.setAttribute("opacity",t.opacity-(i-0.2)*(t.opacity/(1-0.2))):_.setAttribute("opacity",t.opacity)});var scenarios={};scenarios.scenario_1={actors: ["actor_1","actor_2","actor_3","actor_4"],tricks: [{trick: "trick_1",start:0,end:1.00},{trick: "trick_2",start:0,end:1}],startAfter:0,duration:2000,actorDelay:100,repeat:0,repeatDelay:1000};var _reqAnimFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,fnTick=function(t){var r,a,i,e,n,o,s,c,m,f,d,k,w;for(c in actors)actors[c]._tMatrix=[1,0,0,1,0,0];for(s in scenarios)for(o=scenarios[s],m=t-o.startAfter,r=0,a=o.actors.length;a>r;r++){if(i=actors[o.actors[r]],i&&i.node&&i._tMatrix)for(f=0,m>=0&&(d=o.duration+o.repeatDelay,o.repeat>0&&m>d*o.repeat&&(f=1),f+=m%d/o.duration),e=0,n=o.tricks.length;n>e;e++)k=o.tricks[e],w=(f-k.start)*(1/(k.end-k.start)),tricks[k.trick]&&tricks[k.trick](i,Math.max(0,Math.min(1,w)));m-=o.actorDelay}_reqAnimFrame(fnTick)};_reqAnimFrame(fnTick);})()]]></script>
</svg>

Answer 1

如果我使用<img />，则代替<object></object> SVG是动画正在运行。

<object type="image/svg+xml" data="marker-with-wave.svg">
  Your browser does not support SVG
</object>

一旦置于网页内，就无法播放SVG动画

1 个答案: