AngularJS应用中的Svg clipPath, url为hashbang模式

Svg clipPath in AngularJS app with url in hashbang mode

本文关键字：url hashbang 模式 clipPath 应用 Svg AngularJS      更新时间：2023-09-26

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

假设我有一个这样的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的问题吗?

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>

引用

  • XML基础

  • clipPath属性| clipPath属性

相关文章：