Код SVG внутри encodeURIComponent не работает в IE

Я пытаюсь анимировать что-либо внутри encodeURIComponent() в IE. Я знаю, что SMIL не поддерживается IE, но это намного проще, чем использовать чистый JS для анимации/поворота тега svg. Вот пример того, что работает в Firefox и Chrome, но не в IE:

var uri = encodeURIComponent(
                '<?xml version="1.0" encoding="utf-8"?>' +
                '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 120 40" xml:space="preserve">' +
                '<script type="text/javascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>' +
                    '<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">' +
                    '<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" />' +
                    '</circle>' +
                 '</svg>');

Вы заметите xlink:href для FakeSmile, который, я думаю, должен обрабатывать анимацию без проблем, поскольку он не динамичен. Если вы попробуете аналогичную скрипту, вы увидите, что она работает в IE внутри тега:

http://jsfiddle.net/FG3PG/1/

Это работает из-за некоторых метатегов или другого html-кода на конце jsfiddle? Или это тот факт, что код, который я включил, заключен в encodeURIComponent()? В конечном счете, svg нужно обернуть, иначе он вообще не появится, независимо от анимации.


svg animation uri internet-explorer smil
person whyoz    schedule 22.09.2014    source источник
comment
Вы должны предоставить демонстрацию, которая работает в FireFox и Chrome, но не работает в IE. (Предоставленная вами рабочая демонстрация является лишь частью и не показывает проблему).   -  person King King    schedule 23.09.2014
comment
Зачем вам нужен encodeURIComponent? Поместить данные в изображение или фоновое изображение? Вы знаете, что javascript не работает в изображениях, не так ли?   -  person Robert Longson    schedule 23.09.2014
comment
@RobertLongson, да, я знаю, что js не запускается в изображениях, но он запускается, если '‹script type=text/ecmascript›‹![CDATA[...js code...]]›' был включен в uri. не так ли?   -  person whyoz    schedule 23.09.2014
comment
Это зависит. Что вы делаете с переменной uri?   -  person Robert Longson    schedule 23.09.2014
comment
@RobertLongson, я использую частную библиотеку, которая создает прототип фигуры, определяет разметку: '‹image class=body›', затем вызывает get image() при обновлении атрибутов фигуры на холсте, где определен uri, и затем возвращается как: return {'xlink:href': 'data:image/svg+xml,' + uri}. Итак, будет ли закодированный uri включать что-то, что мне не хватает? Я использую CDATA и запускаю js в svg или вызываю чистый js-метод в svg onLoad? Кажется, ничего не работает, но в скрипке работает без кодирования...   -  person whyoz    schedule 23.09.2014

Ответы (1)


arrow_upward
1
arrow_downward

Javascript не будет работать в элементах изображения.

Браузеры с собственным SMIL будут запускать анимацию, но fakesmile — это эмуляция SMIL с помощью javascript и не будет работать с изображением, поэтому ваша анимация не запускается в IE.

person Robert Longson    schedule 23.09.2014
comment
Я не понимаю, как это относится к данной ситуации. Я думаю, вы говорите об URI данных в теге ‹img›, подобном этому css-tricks.com /data-uris это не так. Это про загрузку svg в дом? Я знаю, что вы не можете запускать js из css или img, но вы, безусловно, можете запускать js внутри svg, как скрипка, на которую я ссылался (работает в IE), даже если она завернута в ‹script›, а затем в CDATA внутри начала и конца ‹svg› теги. Оставшийся вопрос и фактор в этой проблеме заключается в том, влияет ли кодирование uri на js в этом теге CDATA. Что вы думаете? - person whyoz; 23.09.2014
comment
Основываясь на вашем последнем комментарии к вопросу, вы используете данные uri в элементе <image>, если это не так, вам нужно сделать вопрос более ясным. - person Robert Longson; 23.09.2014