0

We are using External SVG Sprite file (in form of HTML) in our Angular application which is referenced using <use xlink:href

There were no issues till we implemented SEO to remove hash from Angular by having 

$locationProvider.html5Mode(true);

If mode is true SVG loads fine in all browsers using external links. However, with the mode as true it works fine in IE11 but does not load in Google Chrome and firefox. The peculiar behavior is that all SVGs appear on the first time load in these browsers however, post an event on UI to invoke other nested views SVG stops loading.

Saurav
  • 118
  • 9
  • href without xlink: preceding it is a proposal by the unfinished SVG 2 specification. Chrome and Firefox implement SVG 1.1 where xlink is mandatory currently but they will both eventually implement this at some point. – Robert Longson Apr 29 '16 at 17:33
  • Is there any alternate solution to handle this currently with SVG 1.1 in these browsers? – Saurav Apr 29 '16 at 17:39
  • One approach I could find is to set requireBase as false however, with this the problem is the relative URL formed is not correct. Say the path was localhost/path1 which works fine everytime however, if the path is localhost/path1/path2 the relative path becomes localhost/path1 and thus all script loading or other links fail. – Saurav Apr 29 '16 at 19:00
  • http://stackoverflow.com/questions/19742805/angular-and-svg-filters/19753427#19753427 – Robert Longson Apr 29 '16 at 20:04
  • @ Robert ..is there any solution for xlink href...or the approach to get it working with require base false – Saurav Apr 30 '16 at 08:40
  • What's wrong with the linked answer? – Robert Longson Apr 30 '16 at 08:54

0 Answers0