Встроенный SVG в HTML, с Firefox 3.5 - PullRequest
Новая
       22

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

12 голосов
/ 12 июля 2009

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

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

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

Чего мне не хватает?

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

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

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

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

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

Ответы [ 7 ]

13 голосов
/ 29 июля 2010

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

например. 

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

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

11 голосов
/ 12 июля 2009

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

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

5 голосов
/ 12 июля 2009

Обязательно назовите файл ".xml", а не ".html"

3 голосов
/ 12 июля 2009

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

2 голосов
/ 21 июля 2011

Если вы динамически генерируете 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>

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

1 голос
/ 15 августа 2011

Для людей, имеющих эту проблему с ASP.NET, измените doctype на 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";
}
0 голосов
/ 12 июня 2011

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

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

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

...