What are the most common SVG rendering problems?

Question

JavaScript

Specifically, I'm interested in displaying as a functional element, that is, not just displaying a picture, but managing svg elements using JS or embedding html into them through foreignObject.
With the latter, I had problems displaying absolutely positioned html elements in it, and not only did the elements with position: absolute (necessarily wrapped in relative) live their lives without being displayed relative to the parent, but the foreignObject itself could disappear as if when hitting the screen (so-called clipping). As it turned out, this is a year-old bug, although using position fixed somehow solved the problem, I still had to abandon svg as a container, leaving only paths
While working on one of the projects, I highlighted for myself that it’s better not to use anything other than paths, except if it’s a simple graph (for example, those that are created through D3.js)

Answer 1

We had a problem with baseUrl, that is, if present, then the reference does not work correctly in FF, IE.
Such url(#myElement) don't work, + more filters and masks.

Answer 2

SVG animations. How to make it work when xmlhttprequest is running in firefox?