Подтвердить что ты не робот

Встроенный 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, и сделаем что-нибудь что-то.

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

например.

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

    <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>

Он не идеален, но кажется, что он работает.

Ответ 6

Для людей, имеющих эту проблему с 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";
}

Ответ 7

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

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

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