svg アニメーションの練習 - transparent と scale()

https://end0tknr.hateblo.jp/entry/20231211/1702260505

先日、上記entryで、cssによるテキストアニメーションを行いましたが、 今回は、svg アニメーション

その1 - 透過 (transparent)により、全体を徐々に表示

<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">
<style>
.stop_21, .stop_22 { animation-name           : grad_2_anime;
             animation-delay          : 0.0s;
             animation-duration       : 4s;
             animation-iteration-count: infinite;
             /* ease-out : アニメーション終了付近で動きが緩やか */
             animation-timing-function: ease-in-out;
           }
@keyframes grad_2_anime { 0%   { stop-color: transparent;   }
              100% { stop-color: '';            }}
#cone_2 { fill : url(#grad_2);}
</style>
  <defs>
    <!-- y1=y2=0%で横方向グラデーション定義 -->
    <linearGradient id="grad_2" x1="0%" y1="0%" x2="100%" y2="0%">
      <!--始点(0%) -->
      <stop class="stop_21" offset="0%"   style="stop-color:#00f;stop-opacity:0"/>
      <!--終点(100%) -->
      <stop class="stop_22" offset="100%" style="stop-color:#00f;stop-opacity:1"/>
    </linearGradient>
  </defs>
  
  <!-- 小文字のqは相対座標指定による2次ベジェ曲線 -->
  <path id="cone_2"
    d="M0,0 q50,100 600,100 l0,30 q-550 0 -600 100 z"/>
</svg>

その2 - scaleX()により、端から徐々に表示

今回の不確実性コーンは pathで描いていますが、 pathには、scale()が機能しないようですので、 別途用意したrectでマスクし、このrectのサイズを徐々に小さくしています。

<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">
<style>
#cone_3 { fill : url(#grad_3);}
#screen_3 { animation-name           : screen_open;
        animation-delay          : 0.0s;
        animation-duration       : 4s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        fill            : #fff;
        transform-origin: 600px 0; }
@keyframes screen_open {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
</style>
  <defs>
    <!-- y1=y2=0%で横方向グラデーション定義 -->
    <linearGradient id="grad_3" x1="0%" y1="0%" x2="100%" y2="0%">
      <!--始点(0%) -->
      <stop class="stop_31" offset="0%"   style="stop-color:#00f;stop-opacity:0"/>
      <!--終点(100%) -->
      <stop class="stop_32" offset="100%" style="stop-color:#00f;stop-opacity:1"/>
    </linearGradient>
  </defs>
  
  <!-- 小文字のqは相対座標指定による2次ベジェ曲線 -->
  <path id="cone_3"
    d="M0,0 q50,100 600,100 l0,30 q-550 0 -600 100 z"/>
  <rect id="screen_3" x="0" y="0" width="600" height="230"/>
</svg>