Встроенный SVG в Firefox

Question

Я немного озадачен этим. Я визуализирую SVG-визуализации, используя Protovis, библиотеку JS, и она отлично работает в Chrome и Firefox. Я сохраняю визуализированный SVG на своем сервере и пытаюсь перерисовать его в виде «галереи», используя функцию PHP, но в Firefox это не удается. Я вижу только текст в SVG, но не SVG.

Я сохраняю полный контент SVG, вот так:

<svg height="220" width="880" stroke-width="1.5" stroke="none" fill="none" font-family="sans-serif" font-size="10px"><g transform="translate(30, 10)"><line stroke-width="1" 

Я пытался использовать <object>, но все, что он делает, это заставляет Firefox загрузить плагин, который он не может найти.

Он работает в бета-версии FF4, но я не понимаю, почему он не будет работать даже в Firefox 3.6. Это то, от чего я должен отказаться? Вы можете увидеть демо здесь:

http://www.rioleo.org/protoviewer (нажмите на «галерею»)

Еще раз спасибо!

Answer 1

Встроенный SVG работает только в Firefox в двух ситуациях:

• В Firefox включен экспериментальный HTML5-парсер (т. Е. Вы используете ночной 4.0)
• Анализируемый документ - это не HTML, а XHTML (Content-type: application/xhtml+xml)

Подход object, предложенный Робом, должен работать, пока отдельный файл SVG приходит с вашего сервера с Content-type: image/svg+xml и вы используете правильный синтаксис:

<object data="foo.svg" type="image/svg+xml" width="400" height="300">

См. статью Дамиана Кьюгли «SVG: объект или встраивание?» для получения подробной информации о некоторых других параметрах или используйте SVGWeb .

Answer 2

Этот пример может быть полезен для вас, объяснение .Поддержка рендеринга SVG во время загрузки и MIME text / html - это поддерживаемая функция ItsNat веб-фреймворка Java, в любом случае она была вдохновлена ​​на этот код JS , последний может быть полезен для вас вваш контекст (PHP).

Answer 3

Убедитесь, что вы используете правильные атрибуты с элементом объекта и конечным тегом:

<object data="yourimage.svg"></object>