由于某种原因,一旦对象的淡入完成,它就会再次变为透明。
<?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>
答案 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属性。