SVG - 動畫不透明

你能否幫我解決，如何創建SVG動畫，它的行爲如何？ https://framer.cloud/aSUDY/SVG - 動畫不透明

我盡力，但它總是行爲不端:-(

這是我的代碼，其中我用6個動畫來循環（3到動畫從0.5到1層的不透明度和三個動畫反之亦然）

 <?xml version="1.0" encoding="UTF-8"?> 
 
    <svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;"> 
 
     
 
     
 
     <defs> 
 
      <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" > 
 
       <animate 
 
         id="anim1" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="0s;anim33.end" 
 
         from="0.5" 
 
         to="1" 
 
         dur="1s" 
 
         fill="freeze" 
 
       /> 
 
      </ellipse> 
 
    
 
      <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z"> 
 
       <animate 
 
         id="anim2" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="anim1.end" 
 
         from="0.5" 
 
         to="1" 
 
         dur="1s" 
 
         fill="freeze" 
 
        /> 
 
      </path> 
 
    
 
      <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z"> 
 
       <animate 
 
         id="anim3" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="anim2.end" 
 
         from="0.5" 
 
         to="1" 
 
         dur="1s" 
 
         fill="freeze" 
 
        /> 
 
      </path> 
 
    
 
      <ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" > 
 
       <animate 
 
         id="anim11" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="anim3.end" 
 
         from="1" 
 
         to="0.5" 
 
         dur="0.1" 
 
         fill="freeze" 
 
       /> 
 
      </ellipse> 
 
    
 
      <path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z"> 
 
       <animate 
 
         id="anim22" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="anim11.end" 
 
         from="1" 
 
         to="0.5" 
 
         dur="0.1" 
 
         fill="freeze" 
 
       /> 
 
      </path> 
 
    
 
      <path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z"> 
 
       
 
        <animate 
 
         id="anim33" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="anim22.end" 
 
         from="1" 
 
         to="0.5" 
 
         dur="0.1" 
 
         fill="freeze" 
 
       /> 
 
      </path> 
 
    
 
     </defs> 
 
    
 
    
 
      
 
       <g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5"> 
 
        <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path> 
 
       </g> 
 
       <g id="CON3" transform="translate(18.000000, 2.000000)" > 
 
        <use xlink:href="#CON33" ></use> 
 
       </g> 
 
       <g id="CON2" transform="translate(16.000000, 4.000000)" > 
 
        <use xlink:href="#CON22" ></use> 
 
       </g> 
 
       <g id="CON1" transform="translate(15.000000, 5.000000)" > 
 
        <use xlink:href="#CON11" ></use> 
 
       </g> 
 
      
 
     
 
    </svg>

來源

2017-05-05 Ally

我已經改變使用值的動畫，他們並不真正需要被鏈接。

我已經刪除了重複以及除了增加複雜性之外真的不做任何其他操作的元素。

<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;"> 
 

 
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5"> 
 
    <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path> 
 
</g> 
 
<g id="CON3" transform="translate(18.000000, 2.000000)" > 
 
    <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z"> 
 
     <animate 
 
         id="anim3" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="0s" 
 
         values="0.5;0.5;0.5;0.5;1" 
 
         dur="2s" 
 
         repeatCount="indefinite" 
 
        /> 
 
    </path> 
 
    </g> 
 
    <g id="CON2" transform="translate(16.000000, 4.000000)" > 
 
    <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z"> 
 
    <animate 
 
         id="anim2" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="0s" 
 
         values="0.5;0.5;0.5;1;1" 
 
         dur="2s" 
 
         repeatCount="indefinite" 
 
        /> 
 
</path> 
 
    </g> 
 
    <g id="CON1" transform="translate(15.000000, 5.000000)" > 
 
    <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" > 
 
     <animate 
 
         id="anim1" 
 
         attributeType="xml" 
 
         attributeName="fill-opacity" 
 
         begin="0s" 
 
         values="0.5;0.5;1;1;1" 
 
         dur="2s" 
 
         repeatCount="indefinite" 
 
       /> 
 
    </ellipse> 
 
</g> 
 
</svg>

來源

2017-05-05 15:10:53

真棒！謝謝你百萬:) – Ally

SVG - 動畫不透明

回答

相關問題