Fix issue where SVG filter animations don't run in Chrome

[JoeWells]

I noticed that when using @svg-filter where the filter contains an animation, the animation does not work in Chrome or Opera.

Example of animated svg filter using <animate />:

:doodle {
    filter: @svg-filter(
                <filter>
                    <feTurbulence numOctaves="1" seed="5" baseFrequency="0.05 0.02" out="turbulence">
                        <animate attributeName="baseFrequency" dur="90s" keyTimes="0;0.5;1" values="0.06 0.02;0.08 0.04;0.06 0.02" repeatCount="indefinite" />
                    </feTurbulence>
                    <feDisplacementMap scale="5" in="SourceGraphic" in2="turbulence">
                        <animate attributeName="scale" dur="5s" values="3;6;3" repeatCount="indefinite" />
                    </feDisplacementMap>
                </filter>
            );
}

The previous implementation creates and references the SVG using URL.createObjectURL(), however it seems that these browsers do not support filter animations when referenced from external SVG files. They do however work perfectly when the SVG is added directly to the DOM.

This change adds the SVGs to the document body and references the filter ids directly instead of using URL.createObjectURL(). Right now they are added to a container <div> with display: none; to prevent any changes to the layout.

Unfortunately this isn't supported well by Firefox (it seems that no solution fits all browsers 😓), however it does support embedding the SVG directly into the CSS as a data URI (even with animations!), so this is used for Firefox browsers.
typeof InstallTrigger !== 'undefined'; is used for the firefox check as this seemed like the neatest thing I could think of. Please let me know if you think this is too messy or if you have any other ideas for this.

I've tested this in Chrome, Opera and Firefox using the css-doodle.github.io project locally.

I really love this project and I just wanted to say thank you for your contributions to it!

[yuanchuan]

Thank you so much!

The only suggestion is to append SVG into the component instead of document.body will be safer :) But that would need an extra API from index.js and pass around to other places.

Actually I have planned to rewrite the whole library and fix issues related to SVG since last year, but my pace is kinda slow.

I also want to introduce a new way to write SVG inside css-doodle. Something like this:

filter: @svg-filter(
  feTurbulence {
    numOctaves: 1;
    baseFrequency: 0.05 0.02;
    seed: 5;
  }
  feDisplacementMap {
    in: SourceGraphic;
    scale: 80;
  }
);

So I'll leave this issue for a while if you don't mind, and I'll take your implementation as a reference. I'll inform you when it's done :)

[JoeWells]

Sure no problem! Sounds good :)

[chenqiongqiong]

looks like its a class