Why is filter(drop-shadow) causing my SVG to disappear in Safari?

Question

I am developing an app using D3.js. I was sidetracked for a while, and recently came back to it. Today I found that, though it worked fine in the past, the SVG map in the ap

Answer 1

I had a similar issue with Safari: SVG objects such as lines would disappear as soon as a filter effect was applied. The same code worked fine in Chrome and Firefox. The code was part of an Angular app. It turns out the problem was triggered by Angular employing the "base" tag.

It appears that Safari applies the base tag to fragment names within embedded SVG images, whereas Chrome and Firefox do not. This code illustrates the issue:

On Safari, only the green line will show, whereas Chrome and Mozilla with show both red and green line.

jsfiddle demonstrating the problem