AngularJS应用程序中的Svg clipPath，url处于hashbang模式答案

【问题标题】：Svg clipPath in AngularJS app with url in hashbang modeAngularJS应用程序中的Svg clipPath，url处于hashbang模式
【发布时间】：2014-08-18 17:44:38
【问题描述】：

我在 AngularJS 项目中使用 svg clipPath。这是this question 的后续问题。

假设我有一个像这样的 svg：

<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>

因为我使用了<base> 元素，所以我不能使用这样的相对路径

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

所以我必须使用绝对 URL + 像这样的片段标识符：

<g clip-path="url(http://example.com/mypage#myClip)">

这在 Firefox、Safari 和 Chrome 中运行良好。但是我的IE有以下问题：

IE9不支持我使用的html5mode，因此使用hashbangs，绝对url变成http://example.com/!#/mypage#myClip，clipPath不起作用。
在 IE10 + IE11 中，当我转到包含我的 SVG 的页面时，clipPath 不起作用，但如果我刷新页面，它就会起作用。

任何想法如何解决 IE 问题？

【问题讨论】：

你试过use $location.absUrl()吗？
@Blackhole：是的，我使用 $location.absUrl() 来获取绝对 url。
您找到解决方案了吗？
你能在 SVG 中使用 AngularJS 吗？如果是，则 make 指令将根据路由器模式设置正确的剪辑路径。
@dimirc 不，不是真正的解决方案。但是我使用$sniffer.history 来确定它是否是 IE9- 如果是，我使用相对路径。否则，它有助于在使用剪辑路径的元素上使用display:none，然后在添加剪辑路径属性之前添加一个小延迟，然后我执行display:inline。一个老套的“解决方案”——我知道。

标签： javascript angularjs svg

【解决方案1】：

IE9不支持我使用的html5mode，因此使用了hashbangs，绝对url变成http://example.com/!#/mypage#myClip，clipPath不起作用。

使用 xml:base 有条件地设置 IE9 的基本 URL：

<g id="xbrowser" clip-path="url(#myClip)">
    <circle cx="30" cy="30" r="20"/>
    <circle cx="70" cy="70" r="20"/>
</g>

<script type="application/ecmascript">
  if ( ("onpropertychange" in document) && !!window.innerWidth)
    {
    document.getElementById("xbrowser").xmlbase = "http://example.com/!#/mypage"
    }
</script>

在 IE10 + IE11 中，当我转到包含我的 SVG 的页面时，clipPath 不起作用，但如果我刷新页面，它就会起作用。

以编程方式为 IE 设置 clipPath：

<script type="application/ecmascript">
  if (!!window.XPathEvaluator === false && !!window.XPathExpression === false)
    {
    document.getElementsByTagName("g")[0].clipPath = "url('#myClip')"
    }
</script>

参考文献

【讨论】：