contentClipPathId doesn't work on apps with <base> tag

[jamesarosen]

When the page has a <base href="/something/"> tag, SVG IRIs that are just fragments don't work. The only such IRI in this project is

'clip-path': Ember.computed('graph.contentClipPathId', function(){
  var clipPathId = this.get('graph.contentClipPathId');
  return  `url('#${clipPathId}')`;
}),

which emits something like

<g clip-path="url(#ember718-content-mask)">

Unfortunately, the only workaround is to use the absolute URL of the page. Thus, I suggest something like

'clip-path': Ember.computed('graph.contentClipPathId', function(){
  var clipPathId = this.get('graph.contentClipPathId');
  const currentURL = document.location.href.replace(/#.+$/, '');
  return  `url('${currentURL}#${clipPathId}')`;
}),

which would in turn emit something like

<g clip-path="url(https://myapp.example.com/some/route#ember718-content-mask)">

/cc @jayphelps, who has some experience with these issues.

[benlesh]

FWIW, the clip path stuff is likely cruft.

[jamesarosen]

It's actually helping me at the moment. I have a live time-series and I render data off to the right of the graph, then use the clip to prevent it from showing up. There might be another way to do that. See http://bost.ocks.org/mike/path/

[jamesarosen]

I'm going to backtrack a bit on that. I've inadvertently been relying on the clip-path not working. Specifically, I show an x-value indicator (eg average or 95th percentile) in the right margin. With the clip-path working, that gets clipped out! It's important, but not necessary, that the indicator sit inside the content <g> so it can line up with a horizontal line.

I can always do my own clipping for live graphs.

[jamesarosen]

The one place the existing clip-path is useful is in adding a fill to the content <g>.