SVG не отображается в Firefox 34.0.5 и IE 11

Я работаю над сайтом, где я использую множество элементов SVG. В последнее время я видел, что элементы отображаются в Chrome версии 39.0.2171.95 m и Opera. Однако, это не в случае с Firefox версии 34.0.5 и Internet Explorer 11. Я проверил этот ответSVG не отображается в Firefox 34.0.5 и IE 11

SVG not rendering properly in Firefox,

Согласно приведенной выше ответ он говорит, что это ошибка в FF 16, однако они разрешили его в последних версиях FF даже в IE11, и, насколько мне известно, SVG не проблема с IE11. Теперь странно, что все простые SVG-файлы визуализируются, однако сложный векторный файл, такой как вектор iPhone 5, не отображается ТОЛЬКО в IE и FF. Ниже приводится SVG это еще не работает в FF или IE:

<svg 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="210px" height="211.5px" viewBox="0 0 210 211.5" style="enable-background:new 0 0 210 211.5;" xml:space="preserve"> 

<style type="text/css"> 
.st0{fill:#FF5200;} 
.st1{fill:none;stroke:#FF5200;stroke-width:7;stroke-miterlimit:10;} 
</style> 

<filter id="drop"> 
    <feOffset result = "offOut" in = "#ff5500" dx = "0" dy = "0"/> 
    <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "4"/> 
    <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/> 
</filter> 

<g id="bolt"> 
<polygon filter="url(#drop)" class="st0" points="138.1,42.5 63.9,116.3 105.2,116.3 70.2,172.3 146.3,98.5 105.1,98.5  "/>

Нажмите this Fiddle Таким образом, вы можете получить лучшее понимание этого вопроса.

Я создал SVG в Illusrator CS6. Итак, мой вопрос: «Каковы здесь явления? Какую ошибку я здесь делаю? Это ошибка в IE и FF? Я использую SVG, потому что хочу включить некоторые анимации SVG. Есть ли хорошие решения для решения этой проблемы? Могу ли я получить хорошие ресурсы по этой конкретной проблеме? Прошу прощения, если этой информации недостаточно, поскольку я новичок в анимации SVG, поэтому я открыт для советов, критики и т. Д., Поскольку я нахожусь на этапе обучения. Если есть какая-либо дополнительная информация, пожалуйста, дайте мне знать, и я отвечу.

EDIT: Пожалуйста, проверьте the Fiddle в FF, IE и Chrome, чтобы увидеть разницу.

Благодарим за помощь!

источник

2015-01-10 Zubair Pyromaniac

Как мы знаем, что ошибка, которую вы делаете, если вы не показать нам код, ISN» t работает? Добавьте небольшой пример к своему вопросу. –

Ohh Извините, что я отправлю его сейчас! –

@RobertLongson здесь [скрипка] (http://jsfiddle.net/yk20q8sn/2/) SVG. Вы ясно поймете, о чем я говорю. –

Это из-за вашего фильтра:
Изменить эту линию <feOffset result = "offOut" in = "#000000" dx = "0" dy = "10"/> к этому <feOffset result = "offOut" in = "SourceGraphic" dx = "0" dy = "10"/>

И это будет работать.

Вы говорили фильтр, чтобы перейти от цвета вместо фильтра-примитив (проверить http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveInAttribute)

Updated Fiddle

источник

2015-01-10 15:12:45 Kaiido

Спасибо много !!! Теперь он работает в FF и IE, просто ключевое слово перепутало мой рабочий процесс, так или иначе я проверил ссылку, но я понимаю, что это ключевое слово FillPaint, как его применить? Если бы вы могли дать мне небольшой пример, было бы очень благодарно ВАС !!! Еще раз спасибо. –

http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/filters-overview-01-b.html –

Интересно, что FF не пропускает случаи 3 и 4 (35,0 бета на osx9) – Kaiido

SVG не отображается в Firefox 34.0.5 и IE 11

ответ

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