55

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.

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.

Is there any way I can get around this problem without having to remove the base tag?

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).

<html>
    <head>
    <base href=".">
    <style>
    .link { stroke: #999; stroke-opacity: .6; }
    marker#arrow { fill: black; }
    </style>
</head>
<body>
    <svg width="100%" height="100%">
        <defs>
            <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
                <path d="M0,-5L10,0L0,5"></path>
            </marker>
        </defs>
        <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
    </svg>
</body>
</html>
2
  • 1
    For what it's worth, you may want to reconsider using the base element. A number of years ago, I had problems with poorly written crawlers go through my site generating thousands of 404s.
    – cimmanon
    Aug 16, 2013 at 11:21
  • 7
    I'll leave this here for any AngularJS users to save them a day of pain: github.com/angular/angular.js/issues/8934#issuecomment-56568466
    – Bungle
    Jan 3, 2015 at 18:43

8 Answers 8

56

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)" />
4
  • 9
    Thanx very much for the reply Phrogz. I actually figured this out at the end of the day yesterday. Since im adding the marker via javascript, im just using the following to set marker-start, marker-end, etc attributes values: "url(" + window.location + "#arrow)" One thing to note is that by setting the marker attribute with the absolute url, it did fix the problem in Firefox and Chrome, but now it doesn't work in IE. This is not a big deal though. I can just use different behavior depending on the browser in use. Thanx again. -Dave
    – DaViS
    Aug 16, 2013 at 11:56
  • In our case, the report that got back to me was "all our gradients stopped working"! lol Of course, "url(#gradientName)" doesn't fly with a base tag. This came up when we moved to a Cloudfront dist, so perfectly working code was rendered useless when it was moved to production in Cloudfront via a base tag. Nov 18, 2013 at 11:53
  • @DaViS I just ran into this, too. FWIW, using an "external" file reference to specify the marker URL lacks browser support, which would explain the issue in IE (though I'm surprised it worked in Chrome). See: stackoverflow.com/questions/27752494/…
    – Bungle
    Jan 3, 2015 at 18:20
  • Great answer, helped me figure out my own problem with fill:url(#id). If you are trying to apply style from svg defs with base url, you need to set the full path in css for fill, e.g. #my_svg {fill:url(tld.com/subpage#id);} Aug 15, 2018 at 18:06
5

Try with javascript:

<line id="something" />

With native:

document.getElementById('something').setAttribute('marker-mid', 'url(' + location.href + '#arrow)');

With jQuery:

$('#something').attr('marker-mid', 'url(' + location.href + '#arrow)');

It just works.

1
  • 1
    great idea, or even better ... $(..tags you wanna target...).each(function(){ var clip_path=$(this).attr('clip-path') var actual_id=clip_path.substring( (clip_path.indexOf('(')+1) , clip_path.indexOf(')') ); $(this).attr('clip-path', 'url('+location.href+actual_id+')' ); });
    – user151496
    Sep 10, 2015 at 10:31
5

In the context of a rich web app like one built on Angular, where you need to set the <base> tag to make HTML5-style navigation work, it can get messy to try to fix that in a permanent way.

In my case, the app I was working on was showing a SVG-based interactive diagram builder that would change the app url as I selected elements therein.

What I did was to add a global event handler that would fix all url(#...) inline styles in any <path> element found in the page:

$rootScope.$on 'fixSVGReference', ->
    $('path').each ->
        $path = $ this
        if (style = $path.attr 'style')?
            $path.attr 'style', style.replace /url\([^)#]*#/g, "url(#{location.href}\#"

Then trigger this handler in key places, like when the app state changes (I'm using ui-router)

$rootScope.$on '$stateChangeSuccess', ->
    $timeout (-> $rootScope.$emit 'fixSVGReference'), 5

As well as anywhere where I know there'd be new/updated paths like these. Here, the $timeout thing is to account for the fact that the DOM nodes really are changed asynchronously sometime after the $stateChangeSuccess event is triggered.

5

In Angular 2+, you can inject the base path in your app module instead of using the <base> tag. This resolved the issue in Edge and Firefox for me.

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
   providers: [{
     provide: APP_BASE_HREF,
     useValue: '/'
   }]
})
export class AppModule { }

https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

1
  • This works for Angular, but then all my image links that were /assets/images... are broken.
    – Steve
    Mar 25, 2019 at 20:25
1

Ember 2.7 will replace the <base> tag with rootURL which should fix this issue.

In the meantime in my d3 for gradients I'm using the following:

.attr('fill', `url(${Ember.$(location).attr('href')}#my-gradient)`);

If you don't do this, the item you are targeting will seem to be transparent.

1

On Windows currently (04-2017) all Browsers behave as expected ( mask=url("#svgmask") ). Chrome, Firefox, even IE 11!! - but Edge comes up with an error.

So for Microsoft Edge you still need to give the absolute path ( mask="url(path/to/this-document.htm#svgmask)" ) for your mask ID´s when you are using a base tag in your document:

<svg viewBox="0 0 600 600" >
  <defs>
    <mask id="svgmask">
      <image width="100%" height="100%" xlink:href="path/to/mask.svg" ></image> 
    </mask>
  </defs>
  <image mask="url(path/to/this-document.htm#svgmask)" width="600" height="600" xlink:href="path/to/image.jpg"></image>
</svg>
0

If you do not want want to modify / animate the svg there is a simpler solution than changing the url() parameter.

Include the svg as image:

<img src="yourpath/image.svg">
0

You can archive it with:

$("[marker-mid]").attr("marker-mid", function () {
    return $(this).attr("marker-mid").replace("url(", "url(" + location.href); 
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.