SVG滤镜无法被应用在Firefox和prevents渲染填充属性 [英] SVG filter fails to render in Firefox and prevents fill attribute from being applied

问题描述

我有与SVG滤镜最奇怪的问题，我不知道如何调试问题还是什么修复可能。

I am having the weirdest problem with an svg filter and I'm not sure how to debug the problem or what the fix might be.

我有我申请了一圈阴影过滤器。下面是我使用（只显示为简洁的圆环图的一个弧）的SVG标记：

I have a drop shadow filter that I'm applying to a circle. Here is the SVG markup that I'm using (only showing one arc of the donut chart for brevity):

<svg height="240" width="240">
  <defs>
    <filter width="130%" height="130%" id="dropshadow">
      <feGaussianBlur stdDeviation="1" result="blur-out" in="SourceAlpha">
        </feGaussianBlur>
      <feOffset result="shadow-out" dy="2" dx="1" in="blur-out">
        </feOffset>
      <feColorMatrix result="color-out" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0" type="matrix" in="shadow-out">
        </feColorMatrix>
      <feBlend mode="normal" in2="color-out" in="SourceGraphic">
        </feBlend>
    </filter>
  </defs>
  <g transform="translate(120,120)" class="donut">
    <g class="arcs">
      <g class="arc">
        <path d="M-63.63961030678927,-63.63961030678928A90,90 0 1,1,-29.811356451234897,84.91927358696267L-27.492695393916627,78.31444119686557A83,83 0 1,0 -58.68986283848344,-58.68986283848345Z" class="a"></path>
        <circle transform="translate(91.16631091370033,-20.75942567573879)" filter="url(#dropshadow)" r="17" class="a"></circle>
        <text transform="translate(91.16631091370033,-20.75942567573879)" text-anchor="middle" dy=".35em" class="chart-label">30</text>
      </g>
    </g>
  </g>
</svg>

这是它如何呈现在Internet Explorer，Chrome浏览器和Firefox：

This is how it renders in Internet Explorer, Chrome, and Firefox:

然而，当我的图表添加到我的应用程序，它使用angularjs /引导并打开它与Firefox它呈现这样的：

However, when I add the chart to my application which uses angularjs/bootstrap and open it up with Firefox it renders like this:

的阴影不再工作既不是圆的填充颜色。即使我选择的元素，并直接应用填充，它仍然无法正常工作。但是，如果我从圈中删除过滤器（填写=URL（#dropshadow）），填充颜色开始工作了。需要注意的是图表中的所有其他浏览器呈现正确。

The drop shadow is no longer working and neither is the fill color for the circle. Even if I select the element and apply a fill directly, it still doesn't work. However, if I delete the filter from the circle (fill="url(#dropshadow)"), the fill color starts working again. Note that the chart renders correctly in all other browsers.

什么引起的填充突然停止只能在Firefox和工作时才加入到我的angularjs /引导项目？

What could be causing the fill to suddenly stop working only in Firefox and only when added to my angularjs/bootstrap project?

推荐答案

当您重新添加使用内联CSS过滤器（样式=过滤器...）。
它再次工作呢？

When you re-add the filter using inline css (style="filter:..."). Does it work again then?

这篇关于SVG滤镜无法被应用在Firefox和prevents渲染填充属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！