svg PITA bug of the day

🔗

Today I've been struggling to understand why this does not work in Firefox, but is OK in Chrome:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <base href="/">
  </head>
  <body>
    <svg>
      <symbol id="pretty-circle">
        <circle cx="15" cy="15" r="10"/>
      </symbol>
      <use xlink:href="#pretty-circle"></use>
    </svg>
  </body>
</html>

Here is a codepen snippet to test if your browser display a circle or not.

I found the answer here: http://stackoverflow.com/a/18265336/636849

Yes, that innocuous <base> tag is the culprit.

Angry frustrated face

Beware of this bug, as now with Angular 2 a base meta tag has to be there by default.

• • • • • • • •