我使用SVG clipPath 在我的AngularJS项目。这是一个后续-问题this问题。

让我们说我有这样的SVG：

 ＆LT; SVG WIDTH =120HEIGHT =120     视口=0 0 120 120版本=1.1     的xmlns =htt​​p://www.w3.org/2000/svg＆GT;    ＆LT;＆DEFS GT;        ＆所述; clipPath ID =myClip＆GT;            ＆LT; RECT X =10Y =10WIDTH =60HEIGHT =60＆GT;＆LT; / RECT＆GT;        ＆LT; / clipPath＆GT;    ＆LT; / DEFS＆GT;    ＆LT; G字夹路径=URL（#myClip）＆GT;        ＆LT;圈CX =30CY =30R =20/＆GT;        ＆LT;圈CX =70CY =70R =20/＆GT;    ＆所述; / g取代;＆LT; / SVG＆GT; 

由于我使用的＆LT;碱基GT; 元素我不能用这样的相对路径

 ＆LT; G字夹路径=URL（#myClip）＆GT; 

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

 ＆LT; G字夹路径=URL（http://example.com/mypage#myClip）＆GT; 

这在Firefox，Safari和Chrome工作正常。但是，我有以下问题，即：

IE9 不支持html5mode我用，因此可用于hashbangs和绝对URL成为 http://example.com/!#/mypage #myClip 和clipPath不起作用。

在 IE10 + IE11 ，当我去的网页包含我的SVG clipPath不工作，但如果我刷新它的工作页面。

任何想法，我该如何解决这个问题的IE？

IE9不支持html5mode我用，因此可用于hashbangs和绝对URL成为 HTTP： //example.com/!#/mypage#myClip 和clipPath不起作用。

使用XML：基础有条件地设置基本URL IE9：

 ＆LT克ID =浏览器之间夹路径=URL（#myClip）＆GT;    ＆LT;圈CX =30CY =30R =20/＆GT;    ＆LT;圈CX =70CY =70R =20/＆GT;＆所述; / g取代;＆LT;脚本类型=应用/的ECMAScript＆GT;  如果（在文件（onpropertychange）及和放大器;！window.innerWidth）    {    的document.getElementById（浏览器之间的）。xmlbase =htt​​p://example.com/!#/mypage    }＆LT; / SCRIPT＆GT; 

在IE10 + IE11，当我去的页面包含我的SVG clipPath不工作，但如果我刷新页面，它的工作原理。

编程设置为clipPath IE：

 ＆LT;脚本类型=应用/的ECMAScript＆GT;  如果（！window.XPathEvaluator ===假放;＆安培;！window.XPathEx pression ===假）    {    document.getElementsByTagName（G）[0] .clipPath =URL（'＃myClip'）    }＆LT; / SCRIPT＆GT; 

参考

XML基地

夹路径属性| clipPath财产

I use svg clipPath in my AngularJS project. This is a follow-up-question to this question.

Let's say I have a svg like this:

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

Because I use the the <base> element I can't use relative paths like this

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

so I have to use absolute URL + a fragment identifier like this:

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

This works fine in Firefox, Safari and Chrome. But I have the following problems with IE:

IE9 doesn't support html5mode which I use, therefore hashbangs are used and the absolute url becomes http://example.com/!#/mypage#myClip and the clipPath doesn't work.

In IE10 + IE11, when I go to the page containing my SVG the clipPath doesn't work, but if I refresh the page it works.

Any ideas how do I solve the IE problems?

IE9 doesn't support html5mode which I use, therefore hashbangs are used and the absolute url becomes http://example.com/!#/mypage#myClip and the clipPath doesn't work.

Use xml:base to conditionally set the base URL for IE9:

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

In IE10 + IE11, when I go to the page containing my SVG the clipPath doesn't work, but if I refresh the page it works.

Set the clipPath programmatically for IE:

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

References

XML Base

clip-path attribute | clipPath property