Svg clipPath in AngularJS app with HTML Base Element
angularjs, svg
Solution
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.
Problem
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.