SVG-Grafik nicht Maßstab in IE10 und 11

Question

Ich habe ein Problem mit SVG-Grafiken auf meiner Website auf IE10 und 11.

Es funktioniert gut in Google-Chrome und Firefox, aber nicht in Internet Explorer. Die Grafik ist winzig und ich kann es nicht auf IE skalieren.

Die SVG-Objekt geschrieben wird als:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 570 910" style="enable-background:new 0 0 570 910;" xml:space="preserve" class="style-svg rule-svg6 alignnone size-full wp-image-9121 replaced-svg"> 

Dies ist, wie seine in CMS Wordpress

hinzugefügt

<img src="http://example.net/mps/noaccess/wp-content/uploads/2016/01/Prevalence-A.svg" alt="Prevalence-A" class="style-svg rule-svg2 alignnone size-full wp-image-9041" /> 

Dann ein Plugin dort installiert ist, die SVG machen: _https: // Wordpress. org/plugins/svg-support/

Jede Zeile dieser Grafik besteht aus einem eigenen Rect. Also, meine Grafik aussieht:

<g> 
      <rect x="220.2" y="196.2" class="rop110" width="736" height="28"></rect> 
      <rect x="220.2" y="106.2" class="rop110" width="699" height="28"></rect> 
      <rect x="220.2" y="256.2" class="rop110" width="829" height="28"></rect> 
      <rect x="220.2" y="76.2" class="rop110" width="642" height="28"></rect> 
      <rect x="220.2" y="226.2" class="rop110" width="456" height="28"></rect> 
      <rect x="220.2" y="46.2" class="rop110" width="365" height="28"></rect> 
      <rect x="220.2" y="166.2" class="rop110" width="596" height="28"></rect> 
      <rect x="220.2" y="136.2" class="rop110" width="141" height="28"></rect> 
     </g> 

Das ist, was ich habe auf in Google-Chrome und Firefox, und es ist in Ordnung.

Und das ist, was ich im Internet Explorer haben: (es winzig ist)

Und ich habe einen svg.image.css mit diesem Code:

svg.style-svg {display: inline-block; 

position: relative; 

width: 100%; 

padding-bottom: 100%; 

vertical-align: middle; 

overflow: hidden; } 

Wenn ich die Breite ändere, funktioniert es für Google-Chrome und Firefox, aber nicht für den Internet Explorer. Es bleibt immer noch klein ..

Ich habe versucht width: auto; oder width: 100px; zu verwenden, aber es funktioniert nicht ..

Answer 1

Sie können es skalierbar machen nach seinen Proportionen durch das SVG-Objekt wie folgt definieren:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="100%" 
    height="100%" 
    viewBox="0 0 570 910" 
    style="display:block"> 

    <rect x="49.6" y="41.6" class="rop20" width="1119.4" height="302"></rect> 

</svg> 

Passen Sie von Ihrem SVG Inhalt jedoch auf, sehen Sie den width=1119.4 Teil, es ist viel größer als die SVG "viewBox" Größe.

Versuchen Sie, eine SVG-Grafik-Editor verwenden, wie „Inkscape“ -es ist kostenlos und läuft auf Linux, Windows & MacOSX, die Sie hier finden können: https://inkscape.org/en/download/

nach dem SVG erstellen und gespeichert als „plain SVG“ , dann können Sie öffnen & bearbeiten Sie den SVG-Code in Ihrem bevorzugten Texteditor, so dass es entsprechend der Breite & Höhe seines Containerelements wie oben gezeigt skalieren.

Wenn Sie es inline-eingebettet mit Ihrem HTML verwenden möchten, entfernen Sie einfach die "XML" -Deklarationen, die Ihre SVG-Grafik-Authoring-Software (wie Inkscape) für die Kompatibilität erstellt.