Question

我在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，绝对网址变为http://example.com/!#/mypage#myClip且clipPath无法正常工作。< / p>
在 IE10 + IE11 中，当我转到包含SVG的页面时，clipPath无法正常工作，但如果我刷新页面则可以正常工作。
< / LI>

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

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

<强>参考

AngularJS app中的svg clipPath，其中url采用hashbang模式

1 个答案: