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 <base> element in my project.

For example this code works in a project without base, but not in a project with <base href="/">

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip">
            <rect x="10" y="10" width="60" height="60"></rect>
        </clipPath>
    </defs>

    <g clip-path="url(#myClip)">
        <circle cx="30" cy="30" r="20"/>
        <circle cx="70" cy="70" r="20"/>
    </g>

</svg>

How can this be solved? I use ui-router, if that is relevant to the question...

This question is about the same, but the "solution" the OP found was to remove the base which isn't a solution in my case.

`base` is not a directive - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base — amcdnl, Sep 10 '14 at 16:01

score 13 · Accepted Answer · answered Jan 29 '14 at 12:31

13

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.

answered Jan 29 '14 at 12:31

Robert Longson

118,664
26
252
242

I have two problems with this method in IE. 1) In IE9 where html5mode is not supported this doesn't work, probably because of the two # in the url. 2) In IE11 it doesn't work when the page loads, but after refresh it works. Do you have an idea how to solve that? – swenedo Jun 27 '14 at 12:59
@swenedo If you have another question, ask it using the Ask Question button on the top right of this site. – Robert Longson Jun 27 '14 at 14:03
Okay, [here is the question](http://stackoverflow.com/questions/24454798/svg-clippath-in-angularjs-app-with-url-in-hashbang-mode). – swenedo Jun 27 '14 at 14:52
5

The workaround I used was to add the relative URL before `#clip` by either `'url(' + $location.path() + '#clip)'` to the controller, or if you need it in html, add `$scope.path = $location.path()` to the controller and `clip-path="url({{path}}#clip)"` to the element. Both require html5mode – morloch Aug 09 '14 at 09:50

score 2 · Answer 2 · answered May 05 '15 at 13:01

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]);

Svg clipPath in AngularJS app with HTML Base Element

2 Answers2

Linked