Ошибка Firefox при применении CSS-фильтра в SVG?

В Firefox, применяя фильтр CSS к SVG, SVG получает 50% от его высоты. Я делаю что-то неправильно или это ошибка FF? Как я могу это исправить?Ошибка Firefox при применении CSS-фильтра в SVG?

http://jsfiddle.net/4gxu98x3/

<svg viewBox="0 0 483.013 483.013" width="0" height="0"> 
    <defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500"> 
     <image xlink:href="http://danielhellier.com/draftlet/img/team/1.jpg" width="500" height="500" /> 
    </pattern> 
    </defs> 
</svg> 

<svg class="filter" width="60" height="60" viewBox="0 0 490.434 490.433"> 
    <path fill="url(#img1)" d="M477.043,219.205L378.575,48.677c-7.974-13.802-22.683-22.292-38.607-22.292H143.041c-15.923,0-30.628,8.49-38.608,22.292L5.971,219.205c-7.961,13.801-7.961,30.785,0,44.588l98.462,170.543c7.98,13.802,22.685,22.293,38.608,22.293h196.926c15.925,0,30.634-8.491,38.607-22.293l98.469-170.543C485.003,249.99,485.003,233.006,477.043,219.205z" /> 
</svg> 

<svg width="60" height="60" viewBox="0 0 490.434 490.433"> 
    <path fill="url(#img1)" d="M477.043,219.205L378.575,48.677c-7.974-13.802-22.683-22.292-38.607-22.292H143.041c-15.923,0-30.628,8.49-38.608,22.292L5.971,219.205c-7.961,13.801-7.961,30.785,0,44.588l98.462,170.543c7.98,13.802,22.685,22.293,38.608,22.293h196.926c15.925,0,30.634-8.491,38.607-22.293l98.469-170.543C485.003,249.99,485.003,233.006,477.043,219.205z" /> 
</svg> 

.filter { 
    filter: grayscale(90%); 
}

источник

2015-07-28 ditto

Это уже работает в Firefox в ночное время. Я не пробовал выпуск Beta или Developer, поэтому он может быть исправлен еще быстрее. –

Похоже, ошибка в реализации Фирефокса из CSS фильтров. Когда вы заменяете его фильтром SVG, это нормально:

<svg viewBox="0 0 483.013 483.013" width="0px" height="0px"> 
    <defs> 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500"> 
      <image xlink:href="http://danielhellier.com/draftlet/img/team/1.jpg" width="500" height="500" /> 
     </pattern> 
     <filter id="greyscale2"> 
      <feColorMatrix type="matrix" values=".33 .33 .33 0 0 
                .33 .33 .33 0 0 
                .33 .33 .33 0 0 
               0 0 0 1 0"/> 
     </filter> 
    </defs> 
</svg> 
<svg x="0px" y="0px" width="60px" height="60px" viewBox="0 0 490.434 490.433"> 
    <path filter="url(#greyscale2)" fill="url(#img1)" d="M477.043,219.205L378.575,48.677c-7.974-13.802-22.683-22.292-38.607-22.292H143.041c-15.923,0-30.628,8.49-38.608,22.292L5.971,219.205c-7.961,13.801-7.961,30.785,0,44.588l98.462,170.543c7.98,13.802,22.685,22.293,38.608,22.293h196.926c15.925,0,30.634-8.491,38.607-22.293l98.469-170.543C485.003,249.99,485.003,233.006,477.043,219.205z" /> 
</svg> 
<svg width="60px" height="60px" viewBox="0 0 490.434 490.433"> 
    <path fill="url(#img1)" d="M477.043,219.205L378.575,48.677c-7.974-13.802-22.683-22.292-38.607-22.292H143.041c-15.923,0-30.628,8.49-38.608,22.292L5.971,219.205c-7.961,13.801-7.961,30.785,0,44.588l98.462,170.543c7.98,13.802,22.685,22.293,38.608,22.293h196.926c15.925,0,30.634-8.491,38.607-22.293l98.469-170.543C485.003,249.99,485.003,233.006,477.043,219.205z" /> 
</svg>

источник

2015-07-28 15:29:48

Ошибка Firefox при применении CSS-фильтра в SVG?

ответ

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