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?
$location.absUrl()
? – Blackhole Jun 27 '14 at 14:56$sniffer.history
to determine if it's IE9- and if it is, I use relative paths. Otherwise it helped to usedisplay:none
on the elements that used clip-path, then add a small delay before adding the clip-path attribute, and then I do adisplay:inline
. A hacky "solution" - I know. – swenedo Sep 12 '14 at 7:40