angularjs - AngularJS 应用程序中的 Svg ClipPath 与 HTML 基本元素

Question

我使用 svg clipPath在我的 AngularJS 项目中。我在指定 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找到的“解决方案”是删除底座，这在我的情况下不是解决方案。

Answer 1

改变

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

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

您也许可以删除某些部件，例如如果基本标记与绝对 URL 匹配，则为 http 和域，因此/mypage#myClip 可能有效。