带有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可能起作用。