nicht angemeldet
SVG in HTML scrollleistenfrei maximieren
Hallo Forum,
ich möchte eine SVG-Grafik (animiert mit Links) maximiert, zentriert und mit korrektem Seitenverhältnis
auf einer Startseite (html) im Browser anzeigen lassen, wobei deren Größe bei Größenänderung des Browserfensters automatisch angepasst werden soll.
Wenn ich direkt die SVG in Firefox/Opera öffne, klappt das wunderbar.
Beim Anzeigen über die html-Seite wird immer die maximale Breite ausgenutzt und ich erhalte ggf. eine vertikale Scrollleiste.
Da ich auf mehreren Rechnern lieber eine anpassbare index.html als Startseite festlegen möchte, als direkt eine SVG, suche ich eine Lösung für o.g. Problem.
(Möglichst ohne Java-Script.)
Hat jemand eine Idee?
Es folgen zwei Beispieldateien, mit denen o.g. Verhalten auftritt.
SVG-Datei (rect.svg):
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 50"
preserveAspectRatio="xMidYMid meet">
<rect x ="0" y ="0" width ="100" height ="50" rx ="15" ry ="15" />
</svg>
HTML-Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<object data="rect.svg" type="image/svg+xml" preserveAspectRatio="xMidYMid meet"></object>
</body>
</html>
Mit ratlosen Grüßen
Max
-
@preserveAspectRatio existiert nur im svg-Namensraum und wird daher innerhalb des object-Tags von html-Parsern ignoriert.
Ist inline-SVG keine Option für dich?
PS: In deinem html-Tag fehlt die Namensraum-Deklaration.
-
Hallo & vielen Dank für deine Antwort.
@preserveAspectRatio existiert nur im svg-Namensraum und wird daher innerhalb des object-Tags von html-Parsern ignoriert.
Dachte ich mir fast, aber ich wollte nichts unversucht lassen. ;)
Ist inline-SVG keine Option für dich?
Eher nicht, da die tatsächlich verwendete SVG (deutlich umfangreicher) von Inkscape generiert wird und damit ggf. nachbearbeitet wird.
Eine Trennung von html und svg spart da sicher eine Menge Copy & Paste.
(Wobei ein Skript dafür natürlich auch nicht so kompliziert wäre.)Ich hatte schon daran gedacht, das SVG als Background zu setzen, was in Opera auch klappte. In Iceweasel (Firefox unter Debian) leider nicht.
PS: In deinem html-Tag fehlt die Namensraum-Deklaration.
Ich hab den HTML Stub von http://de.selfhtml.org/html/allgemein/grundgeruest.htm genommen. Ist eine Namensraum-Deklaration nicht nur für XML/XHTML nötig?
-
Ist inline-SVG keine Option für dich?
Eher nicht, da die tatsächlich verwendete SVG (deutlich umfangreicher) von Inkscape generiert wird und damit ggf. nachbearbeitet wird.
Eine Trennung von html und svg spart da sicher eine Menge Copy & Paste.
(Wobei ein Skript dafür natürlich auch nicht so kompliziert wäre.)Okay das ist ein Argument. Aber gehen wir mal weiter ins Detail:
@preserveAspectRatio scheint der Schlüssel zu deinem Problem zu sein. Problematisch ist, dass dieses Attribut nur im svg-Namesraum bekannt ist. Wie wäre es mit folgendem Ansatz:<html xmlns="http://www.w3.org/1999/xhtml/" xmlns:svg="http://www.w3.org/2000/svg"> [...] <svg:image src="DeineInkscapeDatei.svg" preserveAspectRatio="xMidYMid meet"></svg:image> [...] </html>Der obige Code basiert allerdings nur auf meinem schlechten SVG-Halbwissen.
Ich hatte schon daran gedacht, das SVG als Background zu setzen, was in Opera auch klappte. In Iceweasel (Firefox unter Debian) leider nicht.
Das wäre auch nur ein schlechtes Workaround, weil eventuelle Skript-Manipulationen und zum Beispiel Hyperlinks verloren gehen.
PS: In deinem html-Tag fehlt die Namensraum-Deklaration.
Ich hab den HTML Stub von http://de.selfhtml.org/html/allgemein/grundgeruest.htm genommen. Ist eine Namensraum-Deklaration nicht nur für XML/XHTML nötig?
Korrekt und was steht in deinem doctype? html oder xhtml :P
-
Okay das ist ein Argument. Aber gehen wir mal weiter ins Detail:
@preserveAspectRatio scheint der Schlüssel zu deinem Problem zu sein. Problematisch ist, dass dieses Attribut nur im svg-Namesraum bekannt ist.Stimmt, daher hab ich mir die gültige Attribut noch einmal angesehen.
Ich hatte seinerzeit keinen Erfolg damit, height und width von object auf 100% zu setzen.
Nun las ich, dass man diese Attribute ab dem html-Element 'durchreichen' muss. (Mir war gar nicht klar, dass das html-Element solche Attribute besitzt.).Und kaum macht man's richtig schon funktioniert's:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml/"> <head> <title>SVG</title> <style type="text/css"> html, body, div, object { height: 100%; width: 100%; margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px; } </style> </head> <body height> <div> <object data="rect.svg" type="image/svg+xml" > </object> </div> </body> </html>Ich hab den HTML Stub von http://de.selfhtml.org/html/allgemein/grundgeruest.htm genommen. Ist eine Namensraum-Deklaration nicht nur für XML/XHTML nötig?
Korrekt und was steht in deinem doctype? html oder xhtml :P
Daraus schließe ich:
1. Ich hab den Stub doch nicht von o.g. Quelle kopiert.
2. Copy & Paste befreit nicht vom Lesen.Vielen Dank für die Hinweise und einen schönen 2. Advent.
-
-
-