svg スクロール時のイベントの取得方法

###前提
スクロール → 表示 → svg アニメーション（四角から円へのモーフィング）実装を試みています。
モーフィングのアニメーション自体は下記コードで実現できました。
ただスクロールして表示された段階ですでにモーフィングのアニメーションが実行されてしまっています。
（ロード時にすでに実行されている）

svgは定義してuseタグで使用
###実現したいこと
DOM svgが表示されてからモーフィングアニメーションの実行

###試したこと
スクロールイベントが発生した時にjQueryでsvgのDOMを追加、
begin="DOMNodeInserted"をanimateに設定も動作せず。

###該当のソースコード

html
1<svg version="1.1" class="defs"  style="enable-background:new 0 0 550 550;">
2  <symbol id='entry' viewBox="0 0 550 550">
3    <g class="entry_square">
4      <path class="st1" d="M 273,3
5                           C 408,138 408,138 543,273 
6                           408,408 408,408 273,543
7                           138,408 138,408 3,273
8                           138,138 138,138 273,3
9                           Z">
10        <animate attributeName="d"
11                 repeatCount="1"
12                 dur="1s" fill="freeze"
13                 begin="1s"
14                 id="animate02"
15                 to="M 273,3
16                     C 422,3 543,123.9 543,273 
17                     543,422 422,543 273,543
18                     123.9,543, 3,422, 3,273
19                     3,123.9, 123.9,3, 273,3Z"/>
20      </path>
21    </g>
22  </symbol>
23</svg>