SVG feTurbulence filter will not animateTransform rotate on Firefox

Question

This code is saved in a .SVG file and it animates as intended on most browsers, but not on Firefox.

The feTurbulence filter and the rotation animation work separately on any other shapes, but when combined the entire svg breaks and shows nothing.
I do not know if this is my fault, if its not supported, or If I should report it as a bug.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
    <filter id="THE_FILTER" x="0" y="0" width="10" height="100">
        <feTurbulence id="turbulence" baseFrequency="10" numOctaves="5"/>
    </filter>
    <rect x="0" y="0" width="1" height="1" style="filter: url(#THE_FILTER);">
         <animateTransform attributeName="transform" type="rotate" from="360" to="340" dur="5s" repeatCount="indefinite"/>
    </rect>
</svg>

I need to make this work as a simple .svg file without scripts. My users get the .svg file by any means, then they open it on whatever browser they have without visiting a website, and sometimes offline. At that point I cannot give them instructions, and if they are Firefox users they will not see an animation and give up.

Getting this specific filter to rotate would help advance a technical aspect of science research, and I would be eternally grateful :)

https://codepen.io/Astilen/pen/bGvPZJd

Update: The community at bugzilla seems to agree that this is a bug. If you happen to know a workaround please let us know, and if you need a solution for this issue visit the bug listing, upvote it and leave a comment: https://bugzilla.mozilla.org/show_bug.cgi?id=1787793

You can report Firefox bugs via [bugzilla](https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG) — Robert Longson, Aug 29 '22 at 14:17
Thanks, Ill go ahead and report it. In the meantime maybe someone can confirm that this is a bug and not my own fault. — Cupcake_Ria, Aug 29 '22 at 14:51
Seems like a bug to me. You can use [mozregression](https://mozilla.github.io/mozregression/) to find out whether it used to work in some previous version. If it is a regression, that can help pinpoint what to fix. — Robert Longson, Aug 29 '22 at 14:53
If you do file a bug, please post the bug link here for the benefit of future readers — Paul LeBeau, Aug 31 '22 at 04:33
@Paul LeBeau The bugzilla link to the bug is in the main post above, if anyone else needs a solution for this please take a minute to visit the link, upvote the bug and leave a comment — Cupcake_Ria, Aug 31 '22 at 10:32

Michael Mullany · Accepted Answer · 2022-09-12T10:05:37.487

1

If you split the transform off into a wrapper g element. It seems to avoid some of the bug.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100" width="800px" height="800px"> 
  <defs>
    <filter id="THE_FILTER">
        <feTurbulence id="turbulence" type="turbulence" baseFrequency="0.2" numOctaves="1"/>
    </filter>
  </defs>
  <g transform="rotate(5)">
    <rect x="10" y="10" width="30" height="30" fill="black" filter="url(#THE_FILTER)" />
    <animateTransform attributeName="transform" attributeType="XML"
                    type="rotate" values="0;10;0" dur="5s" repeatCount="indefinite"/>
  </g>
</svg>

edited Sep 12 '22 at 10:05

answered Sep 10 '22 at 20:41

Michael Mullany

30,283
6
81
105

I love you so much sir :D You have solved this problem, your solution works effortlessly with 100% precision on FireFox. If I do not comment further, I tried my best to break it but it passed every test. – Cupcake_Ria Sep 15 '22 at 08:41

SVG feTurbulence filter will not animateTransform rotate on Firefox

1 Answers1