如何让不透明度动画停止在动画SVG的最后一帧?

时间:2016-01-06 23:32:15

标签: svg-animate

由于某种原因,一旦对象的淡入完成,它就会再次变为透明。

<?xml version="1.0" encoding="UTF-8"?>


<svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="926.529" height="926.53" viewBox="0 0 926.529 926.53"><title>12th and Midtown Logo</title>

<path id="circle" d="M915.953,463.265c0,250.013-202.676,452.689-452.688,452.689S10.576,713.278,10.576,463.265,213.252,10.576,463.265,10.576,915.953,213.252,915.953,463.265Z" fill="#d39d61" opacity="0" stroke="#fff" stroke-miterlimit="10"/>



<rect id="frame" width="926.529" height="926.53" fill="none"/>

<animate id="changeopacity" xlink:href="#circle" attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="4s" repeatCount="1" restart="never" />
<animateTransform id="centercircle" xlink:href="#circle" attributeName="transform" begin="1s" type="translate" dur="3s" values="385,385;0,0"/>
<animateTransform id="resizecircle" xlink:href="#circle" attributeName="transform" begin="1s" additive="sum" type="scale" dur="3s" values=".05;1"/>


</svg>

1 个答案:

答案 0 :(得分:2)

默认情况下,SMIL动画在完成时会被删除。这就是为什么你的圈子又回到了透明的原因。要修复,您只需添加:

fill="freeze"

到“changeopacity”动画。

以下是更正后的代码:

<svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="926.529" height="926.53" viewBox="0 0 926.529 926.53"><title>12th and Midtown Logo</title>

<path id="circle" d="M915.953,463.265c0,250.013-202.676,452.689-452.688,452.689S10.576,713.278,10.576,463.265,213.252,10.576,463.265,10.576,915.953,213.252,915.953,463.265Z" fill="#d39d61" opacity="0" stroke="#fff" stroke-miterlimit="10"/>

<rect id="frame" width="926.529" height="926.53" fill="none"/>

<animate id="changeopacity" xlink:href="#circle" attributeType="CSS" attributeName="opacity" from="0" to="1" begin="1s" dur="4s" repeatCount="1" restart="never" fill="freeze"/>
<animateTransform id="centercircle" xlink:href="#circle" attributeName="transform" begin="1s" type="translate" dur="3s" values="385,385;0,0"/>
<animateTransform id="resizecircle" xlink:href="#circle" attributeName="transform" begin="1s" additive="sum" type="scale" dur="3s" values=".05;1"/>
</svg>

SMIL规范有一个section,用于记录fill属性。