Как я могу заставить тег svg работать только тогда, когда он отображается на экране. Вот тренировочный шорткод, над которым я работаю
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
<g>
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate id="op1" attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>
</g>
</svg>
SVG в настоящее время анимируется при загрузке страницы. я хочу, чтобы это работало только тогда, когда оно отображается на экране.