IE 7/8에서 렌더링 svg

버튼이 FF, Chrome, Safari에서 잘 표시됩니다. IE 7/8에서는 렌더링되지 않습니다.IE 7/8에서 렌더링 svg

는 여기가 주어 졌어 코드입니다 :

<!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>

출처

2013-05-02 user2341255

내가 텍스트 "내가 여기 새로 왔어"의 전체 무리 당신은 아마 사용되는 IE의 추가 버전을 삭제했습니다. 언제든지 변경 사항을 업데이트하거나 되돌릴 수 있습니다. 또한 정확히 무엇을하고 싶은지 지정하십시오 (예 : IE7에서 SVG 지원). –

기본적으로 svg를 지원하는 IE 버전 (IE9, IE10)에서는 foreignObject가 지원되지 않습니다. –

Internet Explorer에서 SVG를 지원하지 않았다 V9까지 (심지어 그때는 기본적인 지원 만했다).

출처

2013-05-02 00:42:11

IE9는 꽤 괜찮은 SVG를 지원합니다. 나는 그것이 기본 이상이라고 말할 것이다. –

나는 그것이 "기본 SVG 기능 세트"를 지원한다는 Microsoft의 설명에 대한 그 의견을 기반으로합니다. http://msdn.microsoft.com/en-us/ie/hh410107.aspx –

아. 나는 그들이 단지 겸손하다고 생각한다. 요즘 SVG에 많은 미친 SVG 작업을했는데 IE9가 거의 모든 것을 처리 할 수있었습니다. 나는 대부분의 사용에 대해 괜찮다고 생각한다. –

IE는 IE9에서 SVG를 지원합니다. 이전 버전에서는이 기능을 지원하지 않으므로 작동하지 않습니다. IE는 VML이라는 자체 벡터 형식을 지원하지만 polyfill을 작성할 수 있습니다. 그러한 프로젝트 중 하나는 Flash를 사용하여 지원을 구현하는 SVGWeb입니다. 당신이 필요로하는 것을 위해 그것은 잘 작동해야합니다.

자세한 내용은 http://code.google.com/p/svgweb/을 참조하십시오.

출처

2013-05-02 09:32:40

Raphaël 당신을 위해 SVG에서 VML로 변환합니까, 네이티브 SVG를 이해합니다. VML을 배우는 것만 큼 가치가 있다고 생각하지 않습니다.

중요한 점은 IE 9 또는 10은 SVG에서 이물질을 지원한다는 점입니다. SVG 사양에서 선택적이지만 특정 기능을 지원할 때 심각한 문제가 될 수 있습니다. 다른 모든 주요 브라우저가 지원합니다. 실제로 IE 버전에서는 코드가 올바르게 렌더링되지 않습니다.

출처

2013-05-02 09:38:46 David

Ample SDK을 SVG 콘텐츠의 심 (shim)으로 사용할 수도 있습니다. 예 : SVG Tiger

출처

2013-05-02 09:48:43

SVG에서 이물질을 충분히 지원합니까? – David

다음은이 코드를 SVG 뒤에 추가하는 방법입니다.

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

(출처 : https://j.eremy.net/inline-svg-with-ie8-fallback-support/) 시험에서 HTML

는 상하 버튼의 이미지가 파란색 SVG이다. Explorer 8의 경우 PNG, 빨간색입니다.

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; 
 
} \t

<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" 
 
\t viewBox="0 0 159 29" enable-background="new 0 0 159 29" xml:space="preserve"> 
 
<g> 
 
\t <path fill="#0072BB" d="M17.7,0.6l11.5,14L17.8,28.4h123.4l-11.4-13.9l11.5-14H17.7z"/> 
 
\t <g> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t c0.1-0.3,0.1-1,0.1-2.1V9.7z"/> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t c0-0.6-0.1-1-0.3-1.2C58.1,8.2,57.8,8.1,57.3,8.1z"/> 
 
\t \t <path fill="#FFFFFF" d="M68.8,4.9v18.6h-4.4V4.9H68.8z"/> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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"/> 
 
\t \t <path fill="#FFFFFF" d="M86.7,4.9v18.6h-4.4V4.9H86.7z"/> 
 
\t \t <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"/> 
 
\t \t <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 
 
\t \t \t 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"/> 
 
\t \t <path fill="#FFFFFF" d="M115.2,4.9v14.9h2.7v3.7h-7.1V4.9H115.2z"/> 
 
\t </g> 
 
\t <g> 
 
\t \t <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 
 
\t \t \t 144.4,10.1 \t \t "/> 
 
\t \t <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 \t \t 
 
\t \t \t "/> 
 
\t </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>

테스트 HTML : https://danielillo.neocities.org/testSVG.html

출처

2017-03-30 19:11:38 Danielillo

IE 7/8에서 렌더링 svg

답변

관련 문제