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

Я пытаюсь создать смешанный контент HTML/SVG, и у меня возникают проблемы. Содержимое HTML отображается, как и ожидалось, но встроенный SVG — нет. Итак, я провожу некоторые эксперименты.

Я нахожу сайты с примерами встроенного SVG, и они правильно отображаются в моей системе. Итак, я «просматриваю исходный код страницы», копирую/вставляю HTML/SVG в другой локальный файл и открываю этот файл в Firefox. Встроенный SVG не виден.

Я также попробовал тот же эксперимент с Chrome, те же результаты.

Что я могу упустить?

Обновление
Небольшое изменение личности с моей стороны: k montgomery -> kmontgom при использовании OpenID.

В любом случае спасибо всем ответившим. Лучшим решением было установить Response.ContentType; это позволяет мне пока продолжать использовать подход WebForms.

Я подумывал о создании чистого содержимого XHTML в файлах .xml и использовании ASP.NET MVC для обслуживания этого содержимого. Я могу в конечном итоге сделать это в будущем.

Теперь продолжим с jQuery, SVG и заставим эту штуку что-то делать.

Спасибо за помощь.


svg firefox inline
person Community    schedule 11.07.2009    source источник

Ответы (7)


arrow_upward
13
arrow_downward

Альтернативой, если вы не хотите использовать XHTML, является кодирование данных SVG в base64.

e.g. 

<object type="image/svg+xml" 
        data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object>

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

person idij    schedule 29.07.2010
comment
Это интересный механизм, но ограниченный (особенно из-за непоследовательной поддержки браузерами). Некоторая дополнительная информация здесь: en.wikipedia.org/wiki/Data_URI_scheme - person Brent Bradburn; 01.03.2011

arrow_upward
11
arrow_downward

Чтобы встроенный SVG отображался в браузерах, страница должна быть допустимой в формате XHTML и должна обслуживаться с заголовком ответа сервера application/xhtml+xml MIME-типа.

Также можно извлечь встроенный SVG-контент со страницы HTML, см. пример SVG Tiger изображение, которое также можно просмотреть в Internet Explorer (5.5+)

person Sergey Ilinsky    schedule 11.07.2009
comment
Пример ASP.NET: Response.ContentType = "application/xhtml+xml" - person Jørn Schou-Rode; 12.07.2009
comment
Обратите внимание, что это не должно быть проблемой в будущих версиях Firefox. См. hsivonen.iki.fi/test-html5-parsing. - person sdwilsh; 12.07.2009
comment
Для справки, вот простая страница, показывающая XHTML + несколько SVG + JS: phrogz.net/SVG/convert_path_to_polygon.xhtml - person Phrogz; 01.03.2011

arrow_upward
5
arrow_downward

Убедитесь, что файл называется «.xml», а не «.html».

person Greg    schedule 11.07.2009
comment
Спасибо! Это работает. Теперь следующий вопрос: как заставить ASP.NET генерировать файл .XML вместо .HTM или .HTML. - person ; 12.07.2009
comment
Боюсь, я не знаю ответа на этот вопрос - person Greg; 12.07.2009
comment
k montgomery, я думаю, вы можете установить заголовок типа mime, подробности см. в моем ответе. - person Sergey Ilinsky; 12.07.2009
comment
Спасибо за этот совет. Я потратил целый день, пытаясь сделать эту работу. Даже установка мета-контента=application/xhtml+xml не сработала. - person Kuukage; 01.11.2009
comment
Вот еще немного информации об этом. Есть разница, если файл открывается локально или если он обслуживается. wiki.svg.org/Inline_SVG#Choosing_a_Filename_Extension - person kioopi; 03.11.2009

arrow_upward
3
arrow_downward

Как сказал Грег, это должен быть файл, который Firefox распознает как XHTML-файл, а не просто обычный HTML, чего и достигло это переименование. Чтобы получить это из серверного приложения, вам нужно установить заголовок Content-type ответа на application/xhtml+xml.

person Paul Fisher    schedule 11.07.2009

arrow_upward
2
arrow_downward

Если вы динамически генерируете SVG с помощью javascript, он работает встроенно. Вместо:

    <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1000" width="1000">
        <rect id="myrect" x="0" y="0" rx="0" ry="0" width="200" height="300" fill="yellow" stroke="purple" stroke-width="5" />
   </svg>

Ты пишешь:

    <script>
        var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
        svg.setAttribute( "xmlns", "http://www.w3.org/2000/svg/" );
        svg.setAttribute( "xmlns:xlink", "http://www.w3.org/1999/xlink" );
        svg.setAttribute( "height", "1000" );
        svg.setAttribute( "width", "1000" );
        document.body.appendChild( svg ); 
        var rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
        rect.setAttribute( "id", "myrect" );
        rect.setAttribute( "x", "0" );
        rect.setAttribute( "y", "0" );
        rect.setAttribute( "rx", "0" );
        rect.setAttribute( "ry", "0" );
        rect.setAttribute( "width", "200" );
        rect.setAttribute( "height", "300" );
        rect.setAttribute( "fill", "yellow" );
        rect.setAttribute( "stroke", "purple" );
        rect.setAttribute( "stroke-width", "5" );
        svg.appendChild( rect );
    </script>

Это не идеально, но, похоже, работает.

person KeatsKelleher    schedule 21.07.2011

arrow_upward
1
arrow_downward

Для людей, у которых есть эта проблема с ASP.NET, измените тип документа на HTML5 и тип содержимого на application/xhtml+xml, я пробовал это в IE9, FF 3.6 и Chrome 13:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
.....
etc

И в коде:

protected void Page_Load(object sender, EventArgs e)
{
this.Response.ContentType = "application/xhtml+xml";
}
person Moutaz Shams    schedule 14.08.2011

arrow_upward
0
arrow_downward

Как отмечают другие, пока вы используете XHTML и ваши пространства имен верны, все готово — вы можете просто использовать тег ‹svg› прямо в HTML.

При тестировании я обнаружил, что он действительно хорошо работает только в Firefox 4 и последних сборках Chrome, но YMMV. Для вещей в интрасети, где вы знаете, что все используют приличный браузер, это нормально.

Я провел несколько экспериментов по созданию встроенного SVG с помощью JavaScript. Не стесняйтесь проверить это, вы можете найти код полезным.

person Ben Hardy    schedule 12.06.2011
comment
Спасибо, Луис, теперь это исправлено. - person Ben Hardy; 05.06.2012