Svg clipPath w aplikacji AngularJS z adresem URL w trybie hashbang

Używam svg clipPath w moim projekcie AngularJS. To jest kolejne pytanie do this question.Svg clipPath w aplikacji AngularJS z adresem URL w trybie hashbang

Powiedzmy mam SVG takiego:

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

Ponieważ używam elementu <base> nie mogę używać ścieżek względnych jak ten

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

więc muszę używać bezwzględny adres URL + identyfikator fragmentu w ten sposób:

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

Działa to dobrze w Firefox, Safari i Chrom. Ale mam następujące problemy z IE:

IE9 nie obsługuje html5mode których używam, więc hashbangs są wykorzystywane i bezwzględna url staje http://example.com/!#/mypage#myClip i clipPath nie działa.
W IE10 + IE11, kiedy przejść do strony zawierającej mój SVG clipPath nie działa, ale jeśli odśwież stronę działa.

Wszelkie pomysły na rozwiązanie problemów związanych z IE?

Źródło

2014-06-27 swenedo

Czy próbowałeś [użyć '$ location.absUrl()'] (http://stackoverflow.com/a/19753427/2057033)? – Blackhole

@ Backhole: Tak, używam $ location.absUrl(), aby uzyskać bezwzględny adres URL. – swenedo

Czy znalazłeś rozwiązanie? – dimirc

IE9 nie obsługuje html5mode których używam, więc hashbangs są wykorzystywane i bezwzględna url staje http://example.com/!#/mypage#myClip i clipPath nie działa.

użycie xml: base warunkowo ustawić podstawowy adres URL dla 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>

W IE10 + IE11, kiedy przejść do strony zawierającej mój SVG clipPath nie działa, ale jeśli odświeżam stronę, to działa.

Ustaw clipPath programowo dla IE:

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

Referencje

Źródło

2014-09-18 07:51:04

Svg clipPath w aplikacji AngularJS z adresem URL w trybie hashbang

Odpowiedz

Powiązane problemy