clip-path misinterpreted by some programs after export

[alexcjohnson]

We construct attributes like clip-path="url('#clip4e1647xyplot')" which normally works fine on its own, but for some reason recent versions of MS Word convert this to a broken reference clip-path="url(##clip4e1647xyplot)" (note the double ##). If instead we omit the inner quotes clip-path="url(#clip4e1647xyplot)" Word appears to not mess with it, and it works fine.

We’ll have to do some testing to see if we can uniformly remove those extra quotes, especially in the presence of <base> tags (most commonly added by Angular) which force us to include the full page URL in the reference, not just the hash. But most documentation of the clip-path attribute does not include these quotes so hopefully it will be fine.

The fix is on this line:

plotly.js/src/components/drawing/index.js

Line 1273 in 7588c9e

return 'url(\'' + baseUrl + '#' + localId + '\')';

Which, if it works with a baseUrl, could just be simplified to:

return 'url(' + baseUrl + '#' + localId)';

But if that has any problems we could remove the quotes only when baseUrl is falsy ('')

[alexcjohnson]

One potential pitfall: URLs with parens in them, for example: https://en.wikipedia.org/wiki/Textile_(markup_language) - makes me think we should keep the quotes when there is a baseUrl.

For completeness, note that the <base> tag is interrogate here:

plotly.js/src/plot_api/plot_api.js

Lines 427 to 430 in 7588c9e

	var base = d3.select('base');
	gd._context._baseUrl = base.size() && base.attr('href') ?
	window.location.href.split('#')[0] :
	'';