AngularJS 应用程序中的 Svg clipPath 与 HTML 基本元素答案

【问题标题】：Svg clipPath in AngularJS app with HTML Base ElementAngularJS 应用程序中的 Svg clipPath 与 HTML 基本元素
【发布时间】：2014-02-21 04:46:14
【问题描述】：

我在 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 发现的“解决方案”是移除在我的情况下不是解决方案的基础。

【问题讨论】：

base 不是指令 - developer.mozilla.org/en-US/docs/Web/HTML/Element/base
你是对的@amcdnl，我已经更新了问题。

标签： angularjs svg

【解决方案1】：

改变

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

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

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

【讨论】：

我在 IE 中使用这种方法有两个问题。 1）在不支持html5mode的IE9中，这不起作用，可能是因为url中的两个#。 2）在IE11中，页面加载时它不起作用，但刷新后它起作用。你知道如何解决这个问题吗？
@swenedo 如果您还有其他问题，请使用本网站右上角的按钮提问。
好的，here is the question。
我使用的解决方法是在#clip 之前通过'url(' + $location.path() + '#clip)' 将相对URL 添加到控制器，或者如果您需要在html 中添加$scope.path = $location.path() 到控制器和clip-path="url({{path}}#clip)"到元素。两者都需要 html5mode

【解决方案2】：

如果有人需要一个函数来做到这一点，这里有一个纯 JS 函数：

它将原始的clipPath存储在元素数据属性中，每次调用时，使用document.location.href为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]);

【讨论】：