New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Base tag kills your xlink:href, but only in Firefox #18

Open
Freizeitler opened this Issue Sep 28, 2015 · 3 comments

Comments

Projects
None yet
5 participants
@Freizeitler

Bug or feature?
When using a base tag in your document you might encounter a special behavior in Firefox. It doesn't render the SVG when implemented via a use tag, because it simply can't find the definition. The use tag references the SVG symbol by using a xlink:href="#svg-id". FF prepends the link with the base tag, other major browsers don't. That's kind of tricky when debugging... ;)

@tigt

This comment has been minimized.

Show comment
Hide comment
@tigt

tigt Oct 17, 2015

I think this is actually the correct behavior, but it's hard to say, since HTML5 inline SVG was never really specced out. Better than mucking with xml:base, at least.

tigt commented Oct 17, 2015

I think this is actually the correct behavior, but it's hard to say, since HTML5 inline SVG was never really specced out. Better than mucking with xml:base, at least.

@fredrikekelund

This comment has been minimized.

Show comment
Hide comment
@fredrikekelund

fredrikekelund Oct 19, 2015

I ran into another issue with the same cause, where filters in my SVG document that were referenced via a relative url() prevented the SVG from rendering as soon as I left the start page of my angular application (that was using pushState and <base>). I found a workaround to this in an issue thread in the angular repo angular/angular.js#8934 - namely https://github.com/jeffbcross/angular-svg-base, a directive that automatically sets all references to absolute URL's instead of relative ones, which solves the problem.

I ran into another issue with the same cause, where filters in my SVG document that were referenced via a relative url() prevented the SVG from rendering as soon as I left the start page of my angular application (that was using pushState and <base>). I found a workaround to this in an issue thread in the angular repo angular/angular.js#8934 - namely https://github.com/jeffbcross/angular-svg-base, a directive that automatically sets all references to absolute URL's instead of relative ones, which solves the problem.

@ericsoco

This comment has been minimized.

Show comment
Hide comment
@ericsoco

ericsoco Apr 27, 2016

This is not an issue only with Firefox; Chrome also applies <base href> to SVG xlink:hrefs. Safari, as of this writing, does not.

This is not an issue only with Firefox; Chrome also applies <base href> to SVG xlink:hrefs. Safari, as of this writing, does not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment