Question

我在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大致相同，但＆＃34;解决方案＆＃34;发现的OP是去除了我的情况下不是解决方案的基础。

Answer 1

更改

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

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

您可以删除某些部分，例如http和域如果基本标记与绝对URL匹配，那么/ mypage #myClip可能会起作用。

Answer 2

如果有人需要一个函数来执行它，这里是纯JS中的一个：

它将原始的clipPath存储在元素数据属性中，并且每次调用时都使用url()来使用function fixClipPaths(svg, restore) { Array.prototype.forEach.call(svg.querySelectorAll('*[clip-path]'), function (el) { var clipUrl = el.getAttribute('clip-path'); if(!el.getAttribute('data-original-clip-path')) { el.setAttribute('data-original-clip-path', clipUrl); } el.setAttribute('clip-path', 'url('+ (!restore ? document.location.href : '') + el.getAttribute('data-original-clip-path').substr(4)); }); } // usage example fixClipPaths(document.getElementsByTagName('svg')[0]);的绝对路径

UILabel

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

2 个答案: