Рендеринг svg в IE 7/8

Кнопка отображает штраф в FF, Chrome, Safari. Не будет отображаться в IE 7/8.Рендеринг svg в IE 7/8

Вот код, я был дан:

<!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, что вы, вероятно, использовали. Не стесняйтесь обновлять/отменять изменения. Также укажите, что именно вы хотите работать (т. Е. Поддержка SVG в IE7). –

Обратите внимание, что foreignObject не поддерживается в версиях IE (IE9, IE10), которые поддерживают svg изначально. –

Internet Explorer не поддерживает SVG до v9 (и даже тогда это было только базовая поддержка).

источник

2013-05-02 00:42:11

IE9 имеет довольно приличную поддержку SVG. Я бы сказал, что это не принципиально. –

Я основал этот комментарий от описания Microsoft, что он поддерживает «базовый набор функций SVG». http://msdn.microsoft.com/en-us/ie/hh410107.aspx –

ahh. Я думаю, что они просто скромны. В последнее время я сделал много сумасшедшего материала SVG, и IE9 смог обработать почти все, что я ему бросил. Я думаю, что это нормально для большинства целей. –

IE добавил поддержку SVG в IE9. Предыдущие версии не поддерживают его и не работают. Однако IE поддерживает собственный векторный формат, называемый VML, поэтому можно писать полисы. Одним из таких проектов является SVGWeb, который использует Flash для поддержки. Для того, что вам нужно, он должен хорошо работать.

Для получения более подробной информации см. 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. Пример: 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

Рендеринг svg в IE 7/8

ответ

Смежные вопросы