UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Example URL:
http://codepen.io/MadeByMike/pen/f049a56e997357f44e8579990fb22635?editors=1000

Steps to reproduce the problem:
The <use> element is not positioned correctly in this example:

<svg x="0%" y="100%" width="100%" height="80">
  <use xlink:href="#example" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0%" y="100%" width="100%" height="80">
  <symbol id="doesnotwork">
    <rect x="0" y="0" width="40" height="40" />	
  </symbol>

  <symbol id="example">
    <use xlink:href="#doesnotwork" x="50%" y="10" fill="red" />
    <rect x="50%" y="0" width="40" height="40"  fill="green"/>	
  </symbol>

  <use xlink:href="#doesnotwork" x="50%" y="10" fill="green" />

</svg>

What is the expected behavior?
All boxes should be aligned in the centre of the screen starting position 50%.

What went wrong?
http://codepen.io/MadeByMike/pen/f049a56e997357f44e8579990fb22635?editors=1000

SVG <use> element inside the symbol are not positioned correctly when relative units are used. 

Non-relative units work. 

Relative units work on <use> elements when not a child of a symbol.

Relative units work on other elements such as rect, as child of symbol.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 52.0.2743.116  Channel: stable
OS Version: 10.0
Flash Version: 

Works as expected in other browsers