nicht angemeldet
SVG als img einbinden und mit img-Größe skalieren
Rolf B
2 0 
Matthias Apsel
0 Rolf B
SVG als img einbinden und mit img-Größe skalieren
Rolf B
Hallo,
SVG bringt mich noch um.
Ich habe eine kleine Test-Seite mit inline-SVG gemacht - sieht so aus: http://test.borchmann.one/circ_a.html[1], bzw. ist unten dargestellt. Ein SVG mit 50% Viewport-Breite und Höhe, einer Viewbox die letztlich 1000x1000 ist mit 50 Reservepunkten ringsum, und darin ein paar Kreise. Auf der A-Seite - mit inline svg - skaliert das wunderbar mit der Browsergröße.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box; padding:0; margin:0; }
body { height: 100vh; }
svg { display: block; width: 50vw; height: 50vh; background-color: #333; }
</style>
</head>
<body>
<a href="circ_b.html">Wechsle zur B-Seite</a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="-50 -50 1050 1050" preserveAspectRatio="xMidYMid meet">
<g>
<circle cx="50" cy="50" r="30" fill="white" stroke-width="10" stroke="red"/>
<circle cx="100" cy="100" r="60" fill="white" stroke-width="10" stroke="red"/>
<circle cx="250" cy="250" r="150" fill="white" stroke-width="10" stroke="red"/>
<circle cx="500" cy="500" r="300" fill="white" stroke-width="10" stroke="red"/>
</g>
</svg>
</body>
</html>
Wenn ich die SVG in eine eigene Datei auslagere, wird der Inhalt des SVG nicht mehr mit der Größe des SVG skaliert. Im Chrome. Und im Firefox. In Edge und IE dagegen schon.
Siehe hier: http://test.borchmann.one/circ_b.html
Ich möchte das Verhalten von Edge/IE gerne auch in Chrome/FF sehen. Frage ist nur: Macht Microsoft oder der Rest der Welt es falsch? Und wie macht man es richtig? Wenn ich google, finde ich diverse Tiraden über die Unzulänglichkeiten von SVG Skalierung, aber die genannten Tricks helfen nicht die Bohne. Die externe SVG Grafik rendert stur mit fester Größe und wird durch Größenangaben im HTML lediglich beschnitten.
Rolf
--
sumpsi - posui - clusi
sumpsi - posui - clusi
Ok, gut, ich habe jetzt meinen Nachnamen geoutet. Das ist meine Homepage, die vermutlich immer under construction bleiben wird und deren Inhalt im Wesentlichen der Default von one.com ist. ↩︎
akzeptierte Antworten
SVG als img einbinden und mit img-Größe skalieren
Bewertung: +2, 2 Stimmen
-
Hallo Rolf,
nachdem ich ein wenig ausprobiert habe und ähnlich weit gekommen bin wie du, habe ich mir mal die verwendeten Tags angeschaut. Des Rätsels Lösung war:
viewBox, nicht viewbox.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 1050 1050" preserveAspectRatio="xMidYMid meet">viele Grüsse Linda
-
Hallo lindasown,
nachdem ich ein wenig ausprobiert habe und ähnlich weit gekommen bin wie du, habe ich mir mal die verwendeten Tags angeschaut. Des Rätsels Lösung war:
viewBox, nicht viewbox.
In dem Fall sind es Attribute. Wisse um den Unterschied. 😉
Bis demnächst
Matthias--
Rosen sind rot.-
Hallo Matthias,
wenn deine Seite jetzt noch betonte, dass XML case sensitive ist und HTML nicht, wäre sie perfekt :)
Rolf
--
sumpsi - posui - clusi-
Hallo Rolf B,
wenn deine Seite jetzt noch betonte, dass XML case sensitive ist und HTML nicht, wäre sie perfekt :)
Dann mach ich sie perfekt.
Bis demnächst
Matthias--
Rosen sind rot. -
Hallo Rolf B,
wenn deine Seite jetzt noch betonte, dass XML case sensitive ist und HTML nicht, wäre sie perfekt :)
Hm. Im (X)HTML-Umfeld scheint das unwichtig zu sein.
Bis demnächst
Matthias--
Rosen sind rot.
-
-
Hallo Matthias,
Der hier ist schuld: http://wiki.selfhtml.org/wiki/SVG/Elemente/Grundformen#Rechteck
Fixe ich sofort.
Rolf
--
sumpsi - posui - clusi -
Hallo Matthias,
In dem Fall sind es Attribute. Wisse um den Unterschied. 😉
ein typischer Fall von 'eigentlich wissen'. Also war der Hinweis wohl dringend nötig. :D Danke.
Gruss Linda
-
-
Hallo Linda,
Test gelungen, das war es. Als HTML Attribut fällt es nicht auf, im XML schon. D.h. der IE macht es falsch, er ist case insensitive wo er case sensitive sein sollte. Oder?
Auf diesen Punkt hätte ich nie geguckt - tausend Dank.
Rolf
--
sumpsi - posui - clusi
-