nicht angemeldet
Rolf BHallo,
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
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. ↩︎
Matthias Apsel