angularjs - 带有HTML基本元素的AngularJS应用中的svg clipPath

我在AngularJS项目中使用svg clipPath。我在指定clipPath的相对URL时遇到问题，因为我需要在项目中使用<base>元素。

例如，此代码在没有base的项目中有效，但在带有<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>

如何解决呢？我使用ui-router，如果这与问题有关...

This question大致相同，但是OP找到的“解决方案”是删除基础，对于我而言这不是解决方案。

最佳答案

改变

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

因此，您使用的是绝对URL +片段标识符，而不是仅使用片段标识符。例如。网址(http://mydomain.com/mypage#myClip)

您可能可以删除某些零件，例如http和域(如果基本标记与绝对URL匹配)，则/mypage＃myClip可能有效。