Анимация SVG-полигона начинается с некоторой задержкой, когда я хочу, чтобы она работала так же быстро, как CSS ключевые кадры. РЕДАКТИРОВАТЬ: замедление, вызванное сценариями - PullRequest
Новая
       30

Анимация SVG-полигона начинается с некоторой задержкой, когда я хочу, чтобы она работала так же быстро, как CSS ключевые кадры. РЕДАКТИРОВАТЬ: замедление, вызванное сценариями

0 голосов
/ 03 марта 2020

Я загружаю сайт с помощью таймера, аналогичного приведенному ниже, но я не совсем понимаю, почему он загружается статически, и только через секунду он начинает вращаться. К этому времени сайт обычно загружается, поэтому, скорее всего, он что-то делает, даже если пользователь просматривает его в течение доли секунды, как это было бы с CSS ключевыми кадрами, инициировавшими ротацию. 

<svg class="tri" width="100%" height="100%" viewBox="0 0 100 100">
    	<polygon points="27.6,11.5 94.8,50 27.6,88.5" 
            style="fill:none;stroke:#444;stroke-width:4">
    		<animateTransform attributeName="transform" dur="5"
    			type="rotate"
    			from="0 50 50"
    			to="360 50 50" 
    			repeatCount="indefinite"
    		/>
    	</polygon>
    </svg>

Я использую анимацию SVG SMIL, потому что я также изменяю форму, и единственный способ синхронизации с вращением состоял в том, чтобы анимировать все полигоны SMIL.

РЕДАКТИРОВАТЬ: Действительно, самостоятельно и без каких-либо сценариев (которые включают вызов Ajax?), Анимация начинается немедленно. Однако, в отличие от ключевых кадров, сценарии Javascript вызывают задержку его запуска. Это нормальное поведение? Есть ли способ обойти это?

...