SVG-Bild wird im IE viel zu klein angezeigt

[Yogibaer]

Hallo im Forum, für Euch vielleicht ein alter Hut, für mich ein neues Problem: Ich habe ein verweissensitive Grafik mit <SVG...> erstellt. Für das Bild nutze ich einen <image>-Tag. In Chrome und FF ist die Anzeige wunschgemäß (650 * 650 Pixel). Im IE ist nur ein ganz kleines Bild zu sehen, wenn auch voll funktionsfähig.

Wie kann ich dem IE beibringen, das Bild in der richtigen Größe anzuzeigen?

Hoffe auf Hilfe Yogibaer

[Rolf B]

Hallo Yogibaer,

hast Du ein Live-Beispiel für uns?

Rolf

[Yogibaer]

Hallo zusammen, hier mein Code:

<td align="center" colspan=2 >     
   <figure >
   <figcaption><h2>Schulen in den Kreisen<h2></figcaption>
   
     <svg viewBox="1 1 800 650" >
       <defs> 
         <style>		 
           rect:hover {
	       fill: white;
	       opacity:0.5;}
		   circle:hover {
	       fill: white;
	       opacity:0.5;}
         </style>
       </defs> 
 
  <image x="60" y="5" with="650" height=100% link:href="Ostwestfalen-Lippe-1779789.jpg">
    <title>RB Detmold Karte</title>
  </image>	 
  
  <a xlink:href="Bielefeld.html" target="_blank" >
    <circle cx="270" cy="315" r="35" opacity="0"/>  
    <title>Schulen in Bielefeld</title>
  </a>
  
  <a xlink:href="Minden.html" target="_blank">
    <rect x="200" y="35" opacity="0" width="260" height="140" />
	<title>Schulen im Kreis Minden</title>
  </a>
  
  <a xlink:href="Herford.html" target="_blank">
    <circle cx="290" cy="225" opacity="0" r="50" />
	<title>Schulen im Kreis Herford</title>
  </a>
  
  <a xlink:href="Lippe.html" target="_blank">
    <circle cx="390" cy="315" opacity="0" r="80"/>
	<title>Schulen im Kreis Lippe</title>
  </a>
  
  <a xlink:href="Guetersloh.html" target="_blank">
    <circle cx="190" cy="315" opacity="0" r="60"/>  
    <circle cx="210" cy="385" opacity="0" r="60"/>
	<title>Schulen im Kreis Gütersloh</title>
  </a>
   <a xlink:href="Paderborn.html" target="_blank">
    <circle cx="320" cy="485" opacity="0" r="90"/>
	<title>Schulen im Kreis Paderborn</title>
  </a>
   <a xlink:href="Hoexter.html" target="_blank">
    <rect x="410" y="385" opacity="0" width="150" height="200" />
	<title>Schulen im Kreis Höxter</title>
  </a>
 </svg> 
</figure>  
 </td>

[Matthias Apsel]

Hallo Yogibaer,

warum die Tabelle?

Bis demnächst
Matthias

[Yogibaer]

Hallo Yogibaer,

warum die Tabelle?

Ist eine uralte Angewohnheit zur Aufteilung der Seite.

Ich weiß, es gibt modernere und flexiblere Techniken. Ich arbeite in der Schule, wir haben einen genauso uralten FF und damit meine Kids überhaupt etwas sehen, müsste ich als erstes Anpassung an verschiedene Browser bzw Versionen erklären. Das wäre geradezu abschreckend. Wenn wir einen Browser bekommen der html5 kann, werd ich es ändern.

[Yogibaer]

Korrektur: <image x="60" y="5" with="650" height=100% link:href="Ostwestfalen-Lippe-1779789.jpg"> zu <image x="60" y="5" width="650" height="100%" xlink:href="Ostwestfalen-Lippe-1779789.jpg">

[Matthias Scharwies]

Servus!

Hallo im Forum, für Euch vielleicht ein alter Hut, für mich ein neues Problem: Ich habe ein verweissensitive Grafik mit <SVG...> erstellt. Für das Bild nutze ich einen <image>-Tag. In Chrome und FF ist die Anzeige wunschgemäß (650 * 650 Pixel). Im IE ist nur ein ganz kleines Bild zu sehen, wenn auch voll funktionsfähig.

Wie kann ich dem IE beibringen, das Bild in der richtigen Größe anzuzeigen?

Hast du viewBox, width und height verwendet?

Verzichte auf width und height-Angaben. Die viewBox-Angabe ist nötig!

Normal verwendet IE 9-11 die Standardgröße von 300 x 150px.

Siehe: SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten

Herzliche Grüße

Matthias Scharwies

[einsiedler]

Ich selbst habe eine ähnliche Fragestellung, bin aber absoluter NOPE (wie ihr so sagt!)

Ich habe für meinen Fall nachgelesen das man das IMG in <object> einbindet und dem die entsprechende Höhe / Breite zuweist, und es gibt da noch einen gewissen padding-Hack den man ausprobieren könnte. Les mal hier, https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/, bin selbst noch dabei das für meinen Fall auszuwerten. Dort hier: https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_in_responsiven_Webseiten gibt es auch entsprechndes nachzulesen.

Villeicht aber hab ich auch nur einen entsprechenden Anstoß geben können, wenn das verlinkte nicht helfen sollte.

Gruß der einsiedelnde

[Yogibaer]

Hi, erst mal Danke für die Mühen.

Der Selfhtml-Link (der2.) ist die Grundlage für meinen Code. Dem ersten Link muss ich noch folgen

Gruß Yogibaer

[Yogibaer]

Hallo liebe Mitstreiter, habe selbst eine praktikable Lösung gefunden:

SVG im IE mit CANVAS-Tag

Die entscheidenden Zeilen sehen jetzt so aus:

<td align="center" colspan=2 >     
   <h2>Schulen in den Kreisen<h2>
   <div class="svginside" style="max-width:800px">
     <canvas width="800" height="650"></canvas>
     <svg viewBox="0 0 800 650" xmlns="http://www.w3.org/2000/svg" >
     <image x="0" y="0" width="100%" height="100%" xlink:href="Ostwestfalen-Lippe-1779789.jpg">

Für die CSS-Datei habe ich die Einträge von "mediaevent" übernommen.

Vielen Dank für Eure Anregungen, ich hoffe hiermit konnte ich ein bischen zurückgeben. Bis demnächst Yogibaer