SVG feTurbulence filter will not animateTransform rotate on Firefox-CodePudding

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

CodePudding user response：

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>