Как RaphaelJS позволяет встроенному SVG работать в Firefox 3.6? - PullRequest
Новая
       39

Как RaphaelJS позволяет встроенному SVG работать в Firefox 3.6?

3 голосов
/ 19 сентября 2011

Я поигрался с RaphaelJS и понял, что он работает со встроенным SVG, работающим в Firefox 3.6.22 (по крайней мере, он выглядит как , или я одурачен Firebug ...).

Поскольку мой собственный SVG не отображается, мне было интересно, как RaphaelJS выполняет эту функцию, когда Firefox 3.6 не поддерживает тупое встраивание SVG .Я (кратко) посмотрел на источник и также нашел другой ответ , как встроенный SVG может работать в старых браузерах Firefox.Тем не менее, я застрял, заставляя это работать на себя (то есть AJAX-загрузка SVG и размещение его в DOM).

1 Ответ

4 голосов
/ 22 сентября 2011

Я собираюсь ответить на свой вопрос:

  1. На самом деле Рафаэль не делает ничего особенного (в данном случае).

  2. Благодаря ответам на мой пост в Raphaël Google Group Меня указали в правильном направлении. «Встроенный SVG» означает «встроенный в общий HTML» (также объясняется в блоге Mozilla ), поэтому без использования XHTML и правильного пространства имен. Мое предварительное понимание состояло в том, что я мог использовать SVG только через <object> или <embed> в некоторых браузерах (например, Safari 4 или Firefox 3.6) ... что неправильно.

    Я добавлял SVG, передавая его в виде строки XML в метод jQuery .html () . Это отлично работает в текущих версиях большинства современных браузеров, но имя метода дает подсказку, что это может быть неправильным способом, если вы хотите добавить SVG в браузер, который не поддерживает SVG в html . Поэтому я изменил свой код и использовал document.createElementNS , чтобы добавить SVG напрямую в DOM. Есть еще один способ массового внедрения моего SVG-XML (как упоминалось в ветке групп Google), но у меня еще не было времени его изучить.

    Итак, теперь мой SVG работает во всех целевых браузерах, кроме старых IE, что приятно. Пример кода: 

    var svgContainer = document.getElementById("svg-container"),
    svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
    g = document.createElementNS("http://www.w3.org/2000/svg", "g");
svgElement.setAttribute("version", "1.1");
// Add stuff to the group
svgElement.appendChild(g);
svgContainer.appendChild(svgElement);
...