Svg clipPath in AngularJS app with HTML Base Element

Question

I use svg clipPath in my AngularJS project. I have a problem with specifying a relative url to the clipPath because i need to use the

Answer 1

In case anyone needs a function to do it here's one in pure JS:

It stores the original clipPath in the element data attribute and each time called, uses document.location.href to use absolute paths for url()

function fixClipPaths(svg, restore) {
    Array.prototype.forEach.call(svg.querySelectorAll('*[clip-path]'), function (el) {
        var clipUrl = el.getAttribute('clip-path');

        if(!el.getAttribute('data-original-clip-path')) {
            el.setAttribute('data-original-clip-path', clipUrl);
        }

        el.setAttribute('clip-path', 'url('+ (!restore ? document.location.href : '') + el.getAttribute('data-original-clip-path').substr(4));
    });
}

// usage example
fixClipPaths(document.getElementsByTagName('svg')[0]);

Answer 2

Change

<g clip-path="url(#myClip)">

So that you're using an absolute URL + a fragment identifier rather than just a fragment identifier on its own. E.g. url(http://mydomain.com/mypage#myClip)

You may be able to remove some parts e.g. the http and the domain if the base tag matches the absolute URL so /mypage#myClip might work.