Using base tag on a page that contains SVG marker elements fails to render marker

by

The HTML <base> element is used to say “resolve all relative URLs relative not to this page, but to a new location”. In your case, you’ve told it to resolve relative to the directory with the HTML page.

The SVG marker-mid="url(…)" attribute is a FuncIRI Reference. When you use a value like url(#foo) that relative IRI is normally resolved relative to the current page, finding the element with the foo id. But, when you use <base>, you change where it looks.

To solve this problem, use a better value. Since your base reference is the current directory, you can simply use the name of the current file:

<line … marker-mid="url(this_page_name.html#arrow)" />

If you have a different <base> href, than what you’ve shown, like:

<base href="http://other.site.com/whee/" />

then you will need to use an absolute href, e.g.

<line … marker-mid="url(http://my.site.com/this_page_name.html#arrow)" />

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. Setting transform-origin on SVG group not working in Firefox
  3. What happens when localStorage is full?
  4. Different implementation of Flexbox in Firefox and Chrome
  5. text-decoration not working for visited state link
  6. How to draw human body in html5 svg and roate it in 360degree [closed]
  7. Is there a tag to turn off caching in all browsers? [duplicate]
  8. How to apply a style to an embedded SVG?
  9. maxlength ignored for input type=”number” in Chrome
  10. Add a background image (.png) to a SVG circle shape
  11. Google Fonts are not rendering on Google Chrome
  12. html/css hexagon with image inside
  13. Autocomplete off vs false?
  14. HTML5 video element request stay pending forever (on chrome)
  15. Linking to CSS in an SVG embedded by an IMG tag
  16. Creating a ‘New’ spiky label with 24 or above point burst
  17. Extracting SVG from Font Awesome
  18. How do I make Firefox auto-refresh on file change?
  19. Mailto links do nothing in Chrome but work in Firefox?
  20. Draw double curved item with beveled edges
  21. “Invalid form control” only in Google Chrome
  22. Chrome, Safari ignoring max-width in table
  23. How to render svg elements with crisp edges while still keeping anti-aliasing?
  24. Stop Google chrome auto fill the input [duplicate]
  25. Firefox 30 is not hiding select box arrows anymore
  26. Resizing SVG in html?
  27. Disable Chrome translation bar on my website
  28. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  29. How to display alt text for an image in chrome
  30. Flex elements ignore percent padding in Firefox

Leave a Comment