Question

在Firefox中，当将CSS过滤器应用于SVG时，SVG的高度被截断50％。我做错了什么或者这是一个FF错误？我该如何解决这个问题？

<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%);
}

Answer 1

看起来像Firefox的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>

将CSS过滤器应用于SVG时的Firefox Bug？

1 个答案: