Inline SVG в HTML, с Firefox 3.5

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

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

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

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

Update
Незначительное изменение идентичности с моей стороны: к Montgomery -> kmontgom на использовании OpenID.

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

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

Теперь, с помощью jQuery, SVG и создания чего-то.

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

источник

2009-07-11 Anonymous

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

источник

2009-07-11 20:30:54 Greg

Спасибо! Это работает. Теперь следующий вопрос заключается в том, как заставить ASP.NET генерировать файл .XML вместо .HTM или .HTML – 2009-07-11 20:35:25

'fraid Я не знаю ответа на этот вопрос – Greg

k montgomery, я думаю, вы можете установить заголовок типа mime , см. мой ответ для деталей. –

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

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

источник

2009-07-11 20:47:28

Пример ASP.NET: «Response.ContentType =» application/xhtml + xml »' –

Обратите внимание, что это не должно быть проблема в будущих версиях Firefox. См. Http://hsivonen.iki.fi/test-html5-parsing/ – sdwilsh

. Для справки, вот простая страница, показывающая XHTML + несколько SVG + JS: http://phrogz.net/SVG/convert_path_to_polygon.xhtml – Phrogz

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

источник

2009-07-11 20:48:21

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

например.

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

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

источник

2010-07-29 17:06:53 idij

+1 it был полезен для меня! –

Это интересный механизм, но ограниченный (особенно из-за несогласованной поддержки браузера). Дополнительная информация здесь: http://en.wikipedia.org/wiki/Data_URI_scheme – nobar

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

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

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

источник

2011-06-12 15:15:26

URL-адрес искалечен. –

Спасибо, Луис, это исправлено. –

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

Это не идеально, но это, кажется, работает.

источник

2011-07-21 19:07:39 KeatsKelleher

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

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

И in code-behind:

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

источник

2011-08-14 23:41:59

Inline SVG в HTML, с Firefox 3.5

ответ

Смежные вопросы