Rendern von svg im IE 7/8

Schaltfläche zeigt Prima im FF, Chrome, Safari. Nicht die Darstellung im IE 7/8.

Hier ist der code, den ich bereits gegeben habe:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="RadMenu.css">
    </head>
  <body>
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <g id="g" shape-rendering="inherit" pointer-events="all">
     <circle cx="400" cy="210" r="25.6" fill="white" stroke="#505055" strokewidth="2">
     </circle>
       <foreignObject x="383" y="192" width="32" height="32" id="PBtn16400210">
         <html>
         <body>
            <div class="Btn3D" title="" style="width: 101%; height: 100%; background-color:   rgb(218, 184, 82); text-align: center; vertical-align: middle; background-position: initial initial; background-repeat: initial initial;"></div>
         </body>
         </html>
      </foreignObject></g>
     </svg> 
   </body>
</html>
  • Ich habe entfernt ganze Reihe von "ich bin neu hier" text und ergänzte version des IE, die Sie wahrscheinlich verwendet. Fühlen Sie sich frei, zu aktualisieren/wiederherstellen von änderungen. Auch angeben, was genau Sie wollen, zu arbeiten (d.h. SVG-Unterstützung im IE7).
  • Beachten Sie, dass foreignObject wird nicht unterstützt in IE-Versionen (IE9, IE10) unterstützen svg nativ.
InformationsquelleAutor user2341255 | 2013-05-02
  1. 4

    Internet Explorer nicht unterstützt SVG-bis v9 (und selbst dann war es nur Basis-support).

    • IE9 hat ziemlich anständig SVG-Unterstützung. Ich würde sagen, es ist nicht basic.
    • Ich darauf, dass Kommentar aus Microsoft ' s Beschreibung, die Sie unterstützt "die grundlegende SVG-feature-set". msdn.microsoft.com/en-us/ie/hh410107.aspx
    • ahh. Ich denke, Sie sind einfach nur bescheiden. Ich habe eine Menge verrückte SVG-stuff in letzter Zeit und IE9 konnte, Griff fast alles, was ich an ihm warf. Ich denke, es ist gut für die meisten Anwendungen
    InformationsquelleAutor Mark Parnell
  2. 2

    Raphaël tut SVG zu VML-Umwandlung für Sie, es versteht native SVG. Es klingt nicht wie das lernen der VML ist es Wert in deinem Fall.

    Eine wichtige Sache zu beachten ist, dass der IE 9 noch 10 Unterstützung ausländischer Objekte in SVG. Obwohl optional in die SVG-Spezifikationen, es kann ein ernstes Problem bei der Unterstützung für bestimmte Funktionen. Alle anderen großen Browser unterstützen es. Ihr code wird in der Tat nicht korrekt gerendert, in jeder IE-version.

    InformationsquelleAutor David
  3. 0

    IE Unterstützung für SVG in IE9. Frühere Versionen unterstützen es nicht, und wird nicht funktionieren. IE unterstützt, Ihre eigenen Vektor-format VML jedoch, so es möglich ist, zu schreiben polyfills. Ein solches Projekt ist SVGWeb, die verwendet Flash zu implementieren, zu unterstützen. Was Sie brauchen, es sollte gut funktionieren.

    Sehen http://code.google.com/p/svgweb/ für details.

    InformationsquelleAutor David Storey
  4. 0

    Können Sie auch erwägen, Ample SDK als shim für Ihre SVG-Inhalte. Ein Beispiel: SVG-Tiger

    • Hat Reichlich Unterstützung von Fremdkörpern in SVG?
    InformationsquelleAutor Sergey Ilinsky
  5. 0

    Hier ist die Lösung: füge diesen code nach dem SVG. 

      <!--[if lte IE 8]><img src="image.png"><![endif]-->

    (Quelle: https://j.eremy.net/inline-svg-with-ie8-fallback-support/)

    Auf dem testen von html, das Bild zwischen der oberen und unteren Tasten ist ein SVG, blau. Für Explorer 8 ist ein PNG, red.

    CSS:

    a {text-decoration:none}
button {
padding-bottom:2px;
width: 159px;
height: 29px;
border: 3px solid transparent;
border-radius: 75px;
color: #fff;
display: block;
font-weight: bold;
font-size: 1.25em;
margin: 0.75em auto;
position: relative;
cursor: pointer;
}

.btn-TOP {border: #7766A6;
  background-color: #7766A6;
}

.btn-BOT {border:#F47320;
background-color: #F47320;
}

.CENTER {margin: 0 auto;
position:relative;
display: block;
}

    HTML:

    <a href=""><button class="btn-TOP" id="CT">TOP</button></a>

<p><?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg class="CENTER" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="160px" height="30px"
	 viewBox="0 0 159 29" enable-background="new 0 0 159 29" xml:space="preserve">
<g>
	<path fill="#0072BB" d="M17.7,0.6l11.5,14L17.8,28.4h123.4l-11.4-13.9l11.5-14H17.7z"/>
	<g>
		<path fill="#FFFFFF" d="M51.3,15.8c0,1.9,0,3.2-0.1,4c-0.1,0.8-0.3,1.5-0.7,2.1c-0.4,0.6-1,1.1-1.7,1.5c-0.7,0.3-1.5,0.5-2.5,0.5
			c-0.9,0-1.7-0.2-2.4-0.5c-0.7-0.3-1.3-0.8-1.7-1.5s-0.7-1.4-0.8-2.1c-0.1-0.8-0.1-2.1-0.1-4v-3.2c0-1.9,0-3.2,0.1-4
			c0.1-0.8,0.3-1.5,0.7-2.1c0.4-0.6,1-1.1,1.7-1.5c0.7-0.3,1.5-0.5,2.5-0.5c0.9,0,1.7,0.2,2.4,0.5c0.7,0.3,1.3,0.8,1.7,1.5
			c0.4,0.7,0.7,1.4,0.8,2.1c0.1,0.8,0.1,2.1,0.1,4V15.8z M46.9,9.7c0-0.9,0-1.4-0.1-1.7c-0.1-0.2-0.3-0.4-0.5-0.4
			c-0.2,0-0.4,0.1-0.5,0.3c-0.1,0.2-0.2,0.8-0.2,1.7v8.7c0,1.1,0,1.7,0.1,2c0.1,0.3,0.3,0.4,0.6,0.4c0.3,0,0.5-0.1,0.6-0.4
			c0.1-0.3,0.1-1,0.1-2.1V9.7z"/>
		<path fill="#FFFFFF" d="M52.9,4.9H56c2.1,0,3.5,0.1,4.2,0.3c0.7,0.2,1.3,0.6,1.8,1.4c0.5,0.7,0.7,1.9,0.7,3.5
			c0,1.4-0.2,2.4-0.5,2.9c-0.3,0.5-1,0.8-1.9,0.9c0.9,0.2,1.5,0.6,1.7,1c0.3,0.4,0.5,0.8,0.6,1.1c0.1,0.3,0.1,1.3,0.1,2.8v4.9h-4.1
			v-6.2c0-1-0.1-1.6-0.2-1.8c-0.1-0.2-0.5-0.4-1.1-0.4v8.4h-4.4V4.9z M57.3,8.1v4.1c0.5,0,0.8-0.1,1-0.2c0.2-0.1,0.3-0.6,0.3-1.5v-1
			c0-0.6-0.1-1-0.3-1.2C58.1,8.2,57.8,8.1,57.3,8.1z"/>
		<path fill="#FFFFFF" d="M68.8,4.9v18.6h-4.4V4.9H68.8z"/>
		<path fill="#FFFFFF" d="M80.6,11.8h-4.4v-1.7c0-1.1,0-1.7-0.1-2c-0.1-0.3-0.3-0.4-0.6-0.4c-0.3,0-0.5,0.1-0.6,0.3
			c-0.1,0.2-0.1,0.8-0.1,1.8v8.9c0,0.8,0,1.4,0.1,1.6c0.1,0.3,0.3,0.4,0.6,0.4c0.3,0,0.5-0.1,0.7-0.4c0.1-0.3,0.2-0.9,0.2-1.7v-2.2
			h-0.9v-2.8h5.1v10h-2.8l-0.4-1.3c-0.3,0.6-0.7,1-1.1,1.3c-0.5,0.3-1,0.4-1.6,0.4c-0.7,0-1.4-0.2-2.1-0.6c-0.6-0.4-1.1-0.9-1.5-1.5
			c-0.3-0.6-0.5-1.2-0.6-1.8c-0.1-0.6-0.1-1.6-0.1-2.9v-5.5c0-1.8,0.1-3.1,0.3-3.9c0.2-0.8,0.7-1.5,1.5-2.2c0.8-0.7,1.9-1,3.2-1
			c1.3,0,2.3,0.3,3.2,0.9C79.4,6,80,6.7,80.2,7.5c0.3,0.8,0.4,2,0.4,3.5V11.8z"/>
		<path fill="#FFFFFF" d="M86.7,4.9v18.6h-4.4V4.9H86.7z"/>
		<path fill="#FFFFFF" d="M98.2,4.9v18.6h-3.8l-2.3-8.5v8.5h-3.7V4.9h3.7l2.5,8.4V4.9H98.2z"/>
		<path fill="#FFFFFF" d="M107.6,4.9l2.5,18.6h-4.5l-0.2-3.3h-1.6l-0.3,3.3H99l2.2-18.6H107.6z M105.2,16.9
			c-0.2-2.1-0.4-4.7-0.7-7.8c-0.4,3.6-0.7,6.2-0.8,7.8H105.2z"/>
		<path fill="#FFFFFF" d="M115.2,4.9v14.9h2.7v3.7h-7.1V4.9H115.2z"/>
	</g>
	<g>
		<polygon fill="#FFFF00" points="146.9,5.1 149.4,10.1 154.9,11 150.9,14.9 151.9,20.4 146.9,17.8 141.9,20.4 142.9,14.9 138.9,11 
			144.4,10.1 		"/>
		<polygon fill="#FFFF00" points="12.1,5.1 14.6,10.1 20.1,11 16.1,14.9 17.1,20.4 12.1,17.8 7.1,20.4 8.1,14.9 4.1,11 9.6,10.1 		
			"/>
	</g>
</g>
</svg>
  
  <!--[if lte IE 8]>
  <img src="https://image.ibb.co/juwfov/FLAG.png" class="CENTER">
<![endif]-->
</p>

<a href=""><button class="btn-BOT" id="CT">BOTTOM</button></a>

    Test html:
    https://danielillo.neocities.org/testSVG.html

    InformationsquelleAutor Danielillo
Schreibe einen Kommentar