title: Using base tag on a page that contains SVG marker elements fails to render marker
body: <p>I've run into a problem while attempting to use SVG marker elements in an SVG based visualization. I'm adding my changes to a web application which happens to include a base tag on every page, so that any references to CSS files, javascript files, etc can be relative. </p>
  
  <p>I have some example code below which reproduces the issue. There is a line element, and a marker element defined. The marker element is referenced by the line in its 'marker-end' attribute, via uri and id of marker. Without the base tag, the arrow displays fine. With the base tag, it is not shown. The reason is because the base tag changes the way the browser resolves urls.. even for the simple id based url specified in the marker-end attribute of the line. </p>
  
  <p>Is there any way I can get around this problem without having to remove the base tag? </p>
  
  <p>I can't really remove it because the use of it is fairly ingrained in the product I'm working on. I need to support Firefox, Chrome and IE9+ for my webapp. Firefox and chrome both produce this problem. IE works fine (ie. arrow marker displays).</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;base href="."&gt;
      &lt;style&gt;
      .link { stroke: #999; stroke-opacity: .6; }
      marker#arrow { fill: black; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;svg width="100%" height="100%"&gt;
          &lt;defs&gt;
              &lt;marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"&gt;
                  &lt;path d="M0,-5L10,0L0,5"&gt;&lt;/path&gt;
              &lt;/marker&gt;
          &lt;/defs&gt;
          &lt;line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"&gt;&lt;/line&gt;
      &lt;/svg&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>