Inline SVG w HTML, z Firefoksem 3.5

Question

Próbuję stworzyć mieszaną zawartość HTML/SVG i mam problemy. Treść HTML jest wyświetlana zgodnie z oczekiwaniami, ale wbudowana grafika SVG tego nie robi. Więc robię kilka eksperymentów.

Znajduję witryny, które mają przykłady wbudowanego pliku SVG i są poprawnie wyświetlane w moim systemie. Tak więc "wyświetl źródło strony" i skopiuj/wklej kod HTML/SVG do innego lokalnego pliku i otwórz ten plik w przeglądarce Firefox. Brak widocznego SVG.

Próbowałem również tego samego eksperymentu z Chrome, te same wyniki.

Czego może mi brakować?

Aktualizacja
Nieznaczne zmiany w tożsamości z mojej strony: k Montgomery -> kmontgom na korzystanie z OpenID.

W każdym razie dzięki wszystkim, którzy odpowiedzieli. Najlepszym rozwiązaniem było ustawienie Response.ContentType; to pozwala mi kontynuować pracę z WebForms.

Rozważałem tworzenie czystej treści XHTML w plikach .xml i używanie ASP.NET MVC do obsługi tej zawartości. Mogę to zrobić w przyszłości.

Teraz dalej z jQuery, SVG i spraw, aby coś zrobiło.

Dzięki za pomoc.

Answer 1

Upewnij się, że nazwa pliku „xml”, nie „.html”

Answer 2

Aby inline SVG być wyświetlane w przeglądarkach, strona musi być XHTML ważne i muszą być podawane z application/xhtml + xml Nagłówek odpowiedzi serwera mime.

Możliwe jest również, aby wyciągnąć z SVG inline zawartości strony HTML, jak również, patrz przykład na SVG Tiger obrazu, które mogą być również wyświetlane w programie Internet Explorer (5.5+)

Answer 3

Jak powiedział Greg, to musi być plik, który Firefox rozpoznaje jako plik XHTML, a nie zwykły HTML, co jest tym, co zmieniło to nazwanie. Aby uzyskać to z aplikacji po stronie serwera, musisz ustawić nagłówek odpowiedzi Content-type na application/xhtml+xml.

Answer 4

Alternatywą, jeśli nie chcesz robić XHTML, jest kodowanie danych SVG przez base64.

np.

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

Myślę, że to prawdopodobnie nie jest to, co chcesz specjalnie dla swojej sytuacji, ale w każdym razie może być przydatne dla innych.

Answer 5

Jak zauważają inni, tak długo, jak korzystasz z XHTML i twoje przestrzenie nazw są poprawne, jesteś gotowy - możesz po prostu użyć znacznika <svg> w kodzie HTML.

Znalazłem w testach, że sprawdzało się bardzo dobrze w Firefoksie 4 i najnowszych wersjach Chrome, ale w YMMV. Jeśli chodzi o rzeczy w intranecie, o których wiesz, że wszyscy korzystają z przyzwoitej przeglądarki, jest to w porządku.

Zrobiłem trochę experimentation in generating inline SVG using JavaScript. Zapraszam do sprawdzenia tego, może okazać się przydatny kod.

Answer 6

Jeśli dynamicznie generujesz SVG przy użyciu javascript, działa on w trybie inline. Zamiast:

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

Piszesz:

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

To nie jest idealne, ale wydaje się działać.

Answer 7

Dla osób mających problem z ASP.NET zmienić doctype do HTML5 i typ zawartości na application/xhtml + xml, próbowałem go na IE9, FF 3.6 i Chrome 13:

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

I w kodowaniu:

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