SVG <use> doesn't work with a <g> if the <g> is defined later in document

• Component: SVG
• Status: RESOLVED DUPLICATE

[Dean Jackson]

From https://code.google.com/p/chromium/issues/detail?id=349175

Example URL:
http://codepen.io/chriscoyier/pen/bErma

Steps to reproduce the problem:
1. Define an inline <svg> with a <use> element with an xlink:href attribute that points to an id of a <g> element e.g. #shape
2. Define that <g> element with matching id later in the document
3. The svg with <use> will not display it. 

What is the expected behavior?
The <svg> should display it. It does in Firefox and Opera(presto).

It DOES work if you reference the id of a <path>

What went wrong?
SVG <use> doesn't work with a <g> if the <g> is definied later in document.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

[Radar WebKit Bug Importer]

<rdar://problem/18090228>

[Tim Horton]

*** This bug has been marked as a duplicate of bug 105257 ***

[Said Abou-Hallawa]

*** This bug has been marked as a duplicate of bug 139451 ***