nicht angemeldet
Scalieren einer SVG-Grafik1
Hallo,
gerne würde ich eine existierende SVG-Grafik in einer anderen Größe darstellen, als in der Datei selbst angegeben. Der IE schneidet die Grafik einfach ab und der FF baut Scrollleisten ein, nur skaliert wird sie nicht.
Hat da jemand eventuell ein Code-Beispiel parat ...
mbG Rolf
-
Hallo Rolf,
gerne würde ich eine existierende SVG-Grafik in einer anderen Größe darstellen, als in der Datei selbst angegeben. Der IE schneidet die Grafik einfach ab und der FF baut Scrollleisten ein, nur skaliert wird sie nicht.
Setze das viewBox-Attribut beim svg-Element mit den internen Werten [x y width height] und gib bei width und height jeweils 100% an:
<svg ... viewBox="0 0 800 600" width="100%" height="100%"> ... </svg>Grüße,
Thomas-
Hallo Thomas,
Setze das viewBox-Attribut beim svg-Element mit den internen Werten [x y width height] und gib bei width und height jeweils 100% an:
<svg ... viewBox="0 0 800 600" width="100%" height="100%">
</svg>
na-ja, das würde ich gerne versuchen, aber ich kenne kein svg-Element und ich habe in SelfHTML dazu auch nix gefunden. Irgend ein passender Link wäre nicht schlecht ... mbG Rolf-
Hallo Rolf,
das würde ich gerne versuchen, aber ich kenne kein svg-Element und ich habe in SelfHTML dazu auch nix gefunden.
Gemeint war das Wurzelelement im SVG-Dokument.
Grüße,
Thomas-
Hallo Thomas,
das würde ich gerne versuchen, aber ich kenne kein svg-Element
und ich habe in SelfHTML dazu auch nix gefunden.
Gemeint war das Wurzelelement im SVG-Dokument.okay,
habe die Datei in *.xml umbenannt und im Browser nach "viewBox" gesucht.
Wird nix gefunden ... :-(Ach-ja, und wieso taucht in der Datei immer wieder eine Größenangabe auf?
IMHO soll SVG eine frei scalierbare Grafik sein, wozu eine Größenangabe?mbG Rolf
-
Hallo Rolf,
habe die Datei in *.xml umbenannt und im Browser nach "viewBox" gesucht.
Wird nix gefunden ... :-(Trage die Attribute viewBox sowie width und height entsprechend nach, sofern sich die realen Maße ermitteln lassen (Wie breit/hoch ist die Grafik in Pixeln gemessen im Browser?).
Ach-ja, und wieso taucht in der Datei immer wieder eine Größenangabe auf?
IMHO soll SVG eine frei scalierbare Grafik sein, wozu eine Größenangabe?Die Grafik benötigt Koordinaten und Längenangaben. Entweder diese werden gleich prozentual angegeben oder eben mittels viewBox und width=height=100% gemanaged.
Grüße,
Thomas-
Hallo Thomas,
habe die Datei in *.xml umbenannt und im Browser nach "viewBox" gesucht.
Wird nix gefunden ... :-(
Trage die Attribute viewBox sowie width und height entsprechend nach,
sofern sich die realen Maße ermitteln lassen
(Wie breit/hoch ist die Grafik in Pixeln gemessen im Browser?).hmm,
möchtest Du mir einreden, dass man eine SVG-Grafik nur scalieren kann,
wenn man ihren Content umschreibt ... ? ... nee, ne ...Ansonsten tauchen width="1797" und height="1796" genau 40 mal in der Datei auf.
Und genau so groß wird sie auch im Browser dargestellt.
Andere SVG-Dateien haben andere Wiederholungsraten für width und height.
Das Format wurde offensichtlich von Leuten festgelegt, denen EDV ein Buch
mit sieben Siegeln ist und die Mathe im ABI-Kurs abgewählt hatten.mbG Rolf
-
Hallo Rolf,
möchtest Du mir einreden, dass man eine SVG-Grafik nur scalieren kann,
wenn man ihren Content umschreibt ... ? ... nee, ne ...Du kannst die Grafik natürlich mit den Bordmitteln des jeweiligen Viewers/Browsers skalieren. Wenn die Grafik dagegen in ein bestimmtes Fenster geladen werden soll (also mittels object, iframe oder embed) und in der Grafik feste Angaben stehen, dann ist eben eine feste Breite von 800px unflexibel gegenüber einer Angabe von 400px beim zuständigen Fensterobjekt. Dann passt der Inhalt nicht vollständig hinein und skaliert nicht aus "eigener Kraft". Wird dagegen mittels viewBox zwischen den internen und externen Koordinaten vermittelt, dann kann die Grafik sich flexibel an die "Außenwelt" anpassen. Genau das ist die Aufgabe von viewBox!
Beispiel PSE mit viewBox="0 0 620 540"
Ansonsten tauchen width="1797" und height="1796" genau 40 mal in der Datei auf.
Und genau so groß wird sie auch im Browser dargestellt.Das sagte ich ja bereits.
Schreibe in die Grafik:
<svg ... viewBox="0 0 1797 1796" width="100%" height="100%"> ... </svg>Nun werden die internen Koordinaten auf die viewBox bezogen, aber beim Einbinden passt sich das Dokument fließend an die Umgebung an.
Andere SVG-Dateien haben andere Wiederholungsraten für width und height.
Das Format wurde offensichtlich von Leuten festgelegt, denen EDV ein Buch
mit sieben Siegeln ist und die Mathe im ABI-Kurs abgewählt hatten.Das kann sein, wobei man ja die Intention der Ersteller nicht kennt. Vielleicht wurden die Daten aus anderen Formaten konvertiert bzw. nicht für den Browsereinsatz optimiert ...
Grüße,
Thomas-
Hallo Thomas,
vielen Dank für Deine Geduld!
Jetzt sieht alles so aus, wie ich es mir vorgestellt habe.mbG Rolf
-
-
-
-
-
-
-
-
Hat da jemand eventuell ein Code-Beispiel parat ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>SVG Eibinden</title> </head> <body> <object data="test.svg" width="200" height="300" type="image/svg+xml"> <embed src="test.svg" width="200" height="300" type="image/svg+xml" /> </object> </body> </html>So müsste es funktionieren.
MfG UrsB
-
Hai UrsB,
So müsste es funktionieren.
sorry, sowohl IE als auch FF weigern sich, etwas zu ändern.
mfG Rolf
-