带有HTML基本元素的AngularJS应用程序中的Svg clipPath

Question

我clipPath在AngularJS项目中使用了svg .我在为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,如果这与问题有关...

这个问题大致相同,但OP找到的"解决方案"是删除基础,这在我的情况下不是解决方案.

Answer 1

更改

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

这样您就可以使用绝对URL +片段标识符,而不仅仅是片段标识符.例如url(http://mydomain.com/mypage#myClip)

如果基本标记与绝对URL匹配,您可能能够删除某些部分,例如http和域,因此/ mypage #myClip可能有效.