Svg clipPath in AngularJS app with url in hashbang mode

Question

I use svg clipPath in my AngularJS project. This is a follow-up-question to this question.

Let's say I have a svg like this:

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

Because I use the the <base> element I can't use relative paths like this

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

so I have to use absolute URL + a fragment identifier like this:

<g clip-path="url(http://example.com/mypage#myClip)">

This works fine in Firefox, Safari and Chrome. But I have the following problems with IE:

IE9 doesn't support html5mode which I use, therefore hashbangs are used and the absolute url becomes http://example.com/!#/mypage#myClip and the clipPath doesn't work.
In IE10 + IE11, when I go to the page containing my SVG the clipPath doesn't work, but if I refresh the page it works.

Any ideas how do I solve the IE problems?

Have you tried to [use `$location.absUrl()`](http://stackoverflow.com/a/19753427/2057033)? — Blackhole, Jun 27 '14 at 14:56
@Blackhole: Yes, I use $location.absUrl() to get the absolute url. — swenedo, Jun 27 '14 at 16:15
Can you use AngularJS inside SVG? If yes, then make directive that will set proper clip-path depending on router mode. — Klaster_1 Нет войне, Sep 12 '14 at 07:39
@dimirc No, not a real solution. But I use `$sniffer.history` to determine if it's IE9- and if it is, I use relative paths. Otherwise it helped to use `display:none` on the elements that used clip-path, then add a small delay before adding the clip-path attribute, and then I do a `display:inline`. A hacky "solution" - I know. — swenedo, Sep 12 '14 at 07:40

score 0 · Answer 1 · answered Sep 18 '14 at 07:51

IE9 doesn't support html5mode which I use, therefore hashbangs are used and the absolute url becomes http://example.com/!#/mypage#myClip and the clipPath doesn't work.

Use xml:base to conditionally set the base URL for IE9:

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

<script type="application/ecmascript">
  if ( ("onpropertychange" in document) && !!window.innerWidth)
    {
    document.getElementById("xbrowser").xmlbase = "http://example.com/!#/mypage"
    }
</script>

In IE10 + IE11, when I go to the page containing my SVG the clipPath doesn't work, but if I refresh the page it works.

Set the clipPath programmatically for IE:

<script type="application/ecmascript">
  if (!!window.XPathEvaluator === false && !!window.XPathExpression === false)
    {
    document.getElementsByTagName("g")[0].clipPath = "url('#myClip')"
    }
</script>

References

Svg clipPath in AngularJS app with url in hashbang mode

1 Answers1

Linked