Если загружено динамически, SVG не играет анимацию на андроид и сафари

Вот это SVG часть:Если загружено динамически, SVG не играет анимацию на андроид и сафари

<svg id='canvBg' class='radar_canv' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' style='z-index: 0' width='240' height='240'> 
<defs> 
<radialGradient id='backGrad' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'> 
<stop offset='0%' style='stop-color:rgb(0,190,0);stop-opacity:1'></stop> 
<stop offset='100%' style='stop-color:rgb(0,140,0);stop-opacity:1'></stop> 
</radialGradient> 
</defs> 
<circle id='radarBack' cx='50%' cy='50%' r='50%' stroke='rgb(50,240,50)' stroke-idth='2' fill='url(#backGrad)'></circle> 
<line x1='50%' y1='0%' x2='50%' y2='100%' style='stroke-width:2;stroke:rgba(50,240,50,.7);'></line> 
<line x1='0%' y1='50%' x2='100%' y2='50%' style='stroke-width:2;stroke:rgba(50,240,50,.7);'></line> 
<text x='2%' y='49%' fill='navy' font-size='18'></text> 
<g id='gg2'> 
<rect x='50%' y='45%' width='50%' height='5%' fill='green'> 
<animateTransform xlink:href='#gg2' attributeType='XML' attributeName='transform' type='rotate' from='0' to='45' dur='10s' fill='freeze' /> 
</rect> 
</g> 
</svg>

загружает этот кусок кода в <body> динамически и он играет великолепно на ПК, но он терпит неудачу для запуска на моем Android и iPhone Safari. Он загружает графику, но не воспроизводит анимацию. Анимация воспроизводится только тогда, когда SVG встроен в страницу с самого начала.

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

Что может быть причиной и есть ли решение для этого?

P.S. Невозможно использовать внешнюю библиотеку, ребята. Не предлагайте.

источник

2013-05-05 Michael Sazonov

Похоже https://bugs.webkit.org/show_bug.cgi?id=82647 или https://bugs.webkit.org/ show_bug.cgi? id = 74801 –

@RobertLongson Спасибо вам большое. –

Я не уверен, что это поможет вам, но то, что я сделал, и то, что работает, - это предварительно загрузить ваше изображение «svg» через связь subresource.

Haml %link{ href: 'path/to.svg', rel: 'subresource'}

HTML <link href="path/to.svg" rel="subresource"/>

В моем случае, я использую SVG в качестве фона с помощью CSS. До выделения ресурсов ресурса он прекратил анимацию после последующей перезагрузки. Кажется, это исправить. Следует также отметить, что я использую Angular 1.x (1.6.1 на момент написания). Эта предварительная загрузка позволила мне полностью загрузить ресурс до остальной части страницы, которая предположительно предоставила браузеру возможность полностью реализовать ресурс, прежде чем пытаться отобразить его, и по умолчанию статическое изображение.

Это все, конечно, спекуляция, но я не могу спорить с результатами. Извините, это был не более научный ответ. YMMV. Хотелось бы услышать, работает ли это для других!

Подробнее об этом здесь: https://css-tricks.com/prefetching-preloading-prebrowsing/ (ресурс я использовал)

источник

2017-02-08 21:58:07 Volte

Если загружено динамически, SVG не играет анимацию на андроид и сафари

ответ

Смежные вопросы