If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

SVG's wont display when using BASE HREF ="/"

RESOLVED INVALID

Status

()

Core
SVG
RESOLVED INVALID
2 years ago
2 years ago

People

(Reporter: [Rob], Unassigned)

Tracking

({testcase})

40 Branch
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

2 years ago
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

Steps to reproduce:

- Get an svg icon set from icomoon
- make a symbol definition in your body
- in your html... add a svg icon, like:

<svg class="svgico svgico-circle-checked"><use xlink:href="#svgico-circle-checked"></use></svg>

- view your html in firefox
- now add a base href in your head
- view your html in firefox again..
- the isn't showing with a base href :@

See:
http://jsfiddle.net/3u9LU/2/


Chrome and IE are working ...


Actual results:

SVG's dont show when adding a base href


Expected results:

the SVG icon should display. Firefox shouldn't get confused when <use xlink:href="#ID" ........ :(

Comment 1

2 years ago
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
20150826023504
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:43.0) Gecko/20100101 Firefox/43.0
20150901030226

Works for me: I see a magnifying glass icon.
Component: Untriaged → SVG
Keywords: testcase
Product: Firefox → Core
(Reporter)

Comment 2

2 years ago
Please uncomment the base href and click RUN

Comment 3

2 years ago
Adding a base changes all the relative URLs because that's the purpose of base. Once you change them they no longer point to anything.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → INVALID
(Reporter)

Comment 4

2 years ago
@Robert: It's surely a bug in Firefox (?). Chrome, IE and Safari all show SVG's with <base href="/"? and <svg xlink:use="#ID"> .....
(Reporter)

Comment 5

2 years ago
*<svg><use xlink:href="#ID">...

Comment 6

2 years ago
No, it's a bug in Chrome, IE and Safari. The base tag affects relative URLs, you're using relative URLs so thet are affected. #ID becomes /#ID
(Reporter)

Comment 7

2 years ago
@Robert: ok let's say I would agree with you ;) ... Then: what is the best method to display <svg> in Firefox?

Conditions:
- We are using symbol definitions
- We are using a base href

Comment 8

2 years ago
Use absolute URLs.
(Reporter)

Comment 9

2 years ago
But, in my case:
- I have Angular pages with push state routings
- I have old MVC pages

both use SVG symbol references. I would need one generic solution for both cases. Absolute paths isn't an easy generic fix. What would you suggest?

Comment 10

2 years ago
$locationProvider.html5Mode({enabled: true, requireBase: false} 

or maybe

https://github.com/jeffbcross/angular-svg-base

(both from https://github.com/angular/angular.js/issues/8934)
You need to log in before you can comment on or make changes to this bug.