Я пытаюсь создать некоторый смешанный контент HTML/SVG и иметь некоторые проблемы. Содержимое HTML отображается, как ожидалось, но встроенный SVG этого не делает. Итак, я делаю несколько экспериментов.
Я нахожу сайты с примерами встроенного SVG, и они корректно отображаются в моей системе. Итак, я "просматриваю источник страницы" и копирую/вставляю HTML/SVG в другой локальный файл и открываю этот файл в Firefox. Нет видимого SVG.
Я также пробовал тот же эксперимент с Chrome, те же результаты.
Что я могу потерять?
Обновление
Незначительное изменение личности с моей стороны: k montgomery → kmontgom при использовании OpenID.
В любом случае спасибо всем, кто ответил. Лучшим решением было установить Response.ContentType; это позволяет мне продолжить работу с подходом WebForms.
Я рассматривал создание чистого содержимого XHTML в .xml файлах и использование ASP.NET MVC для обслуживания этого контента. Я могу в конечном итоге сделать это в будущем.
Теперь, вперед с jQuery, SVG, и сделаем что-нибудь что-то.
Спасибо за помощь.
Альтернативой, если вы не хотите делать XHTML, является base64 кодирование данных SVG.
например.
<object type="image/svg+xml"
data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object>
Я думаю, что это, вероятно, не то, что вы хотите специально для своей ситуации, но в любом случае может быть полезно для других.
Для того, чтобы встроенный SVG отображался в браузерах, страница должна быть действительна XHTML и должна быть отправлена с заголовком ответа сервера сервера application/xhtml + xml.
Также можно вывести встроенный SVG-контент со страницы HTML, см. пример SVG Tiger, который также может быть просматривается в Internet Explorer (5.5+)
Обязательно укажите файл ".xml", а не ".html"
Как сказал Грег, он должен быть файлом, который Firefox распознает как файл XHTML, а не только обычный HTML-код, что и было сделано. Чтобы получить это из серверного приложения, вам нужно установить ответ Content-type на application/xhtml+xml.
Если вы динамически генерируете 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>
Он не идеален, но кажется, что он работает.
Для людей, имеющих эту проблему с 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";
}
Как отмечают другие, пока вы используете XHTML, и ваши пространства имен правильны, вам хорошо идти - вы можете просто использовать <svg> тег прямо в HTML.
Я нашел в тестировании, что он работает очень хорошо в Firefox 4 и недавних сборках Chrome, но YMMV. Для вещей в интранете, где вы знаете, что все используют приличный браузер, это прекрасно.
Я провел несколько экспериментов при создании встроенного SVG с использованием JavaScript. Не стесняйтесь проверить это, вы можете найти полезный код.