2

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.

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>

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

enter image description here

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

enter image description here

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.

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

Bill
  • 25,119
  • 8
  • 94
  • 125
  • Practical suggestion: try renaming dropshadow to something random like bluebird35 and see if it's a name collision problem. Magical suggestion: add "px" to your SVG width and height units and add a viewBox declaration. – Michael Mullany Nov 20 '13 at 03:55
  • Unfortunately neither the practical or magical suggestion had any affect. – Bill Nov 20 '13 at 04:01
  • It might help to add Mozilla's recommended namespacing to your svg element: – Michael Mullany Nov 20 '13 at 04:33
  • No change. Plus that doesn't account for the fact that it renders fine in Firefox until I try to put it in my application. – Bill Nov 20 '13 at 05:54
  • I was trying to cover the possibility that you have other xml namespaces in your app and it was getting confused. Have you tried using your SVG as a svg file referenced from an img? (how are you defining the circle fill btw - via CSS? - it's not in your SVG) – Michael Mullany Nov 20 '13 at 07:35
  • It's pretty much impossible to say given that the testcase does not exhibit the issue. We really need one that does. – Robert Longson Nov 20 '13 at 09:22
  • @Bill, did you ever find a solution for this? Seems to be related to loading the SVG inside a view... – Cyral Jan 04 '16 at 18:16
  • I may have found a solution: http://stackoverflow.com/questions/19742805/angular-and-svg-filters – Cyral Jan 04 '16 at 18:28
  • The tag is not mandatory in the latest Angular versions. Removing the tag fixes these issues. If you use html5Mode, you need to pass in `$locationProvider.html5Mode({enabled: true, requireBase: false})`. – Bill Jan 04 '16 at 20:54

1 Answers1

0

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

Martijn Dierckx
  • 299
  • 1
  • 2
  • 9