Powiązana SVG nie ma antialii w IE11

Question

Mam SVG logo klienta, które musi mieć jeden schemat kolorów dla nagłówka (niebieski na białym) i jego odwrotność w stopce (biały na niebieskim). Aby zmniejszyć obciążenie, używam pojedynczego wbudowanego elementu <svg> z <symbol>, odwołując się do niego w dwóch miejscach przy użyciu <svg><use xlink:href="#logo"/></svg>, a następnie odpowiednio stylizując każdą wersję za pomocą CSS.

Jak dotąd, tak dobrze. Muszę tylko raz wywołać SVG i mogę stylizować to inaczej w obu miejscach bez żadnych problemów.

Jednak po sprawdzeniu tej konfiguracji w IE11, zobaczyłem, że połączony SVG wygląda okropnie. Wygląda na to, że nie jest wygładzający, ale tylko w połączonej wersji.

Zredukowaliśmy SVG do wersji uproszczonej dla tego przykładu (i anonimizowałem klienta), ale you can see this behavior in a fiddle, jeśli przeglądasz go w IE11.

Oto zrzut ekranu zachowania w IE11. Wersja po lewej to kod, który chcę, ale po prawej stronie widać pogorszenie jakości w porównaniu do pełnej wersji SVG.

Czy istnieje jakikolwiek powód, dlaczego tylko IE11 (IE9 i IE10 czyni to prawidłowo) nie jest? Próbowałem wstawiać shape-rendering="geometricPrecision" i shape-rendering="optimizeQuality" zarówno w elementach <svg> jak i , a jakość nie zmienia się w IE11.

Czego mi tu brakuje?

Answer 1

Wygląda na to, że działa, jeśli umieści się źródło u góry kodu.

tak:

<svg style="display:none" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 90.44" xml:space="preserve" version="1.1"> 
<symbol id="logo"> 
    <defs> 
     <clipPath clipPathUnits="userSpaceOnUse"> 
      <path d="m0 67.83 432 0L432 0 0 0 0 67.83Z" /> 
     </clipPath> 
    </defs> 
    <g transform="matrix(1.3333333,0,0,-1.3333333,0,90.436933)"> 
     <g clip-path="url(#clipPath16)"> 
      <g transform="translate(25.9522,0.5186)"> 
       <path d="m0 0c-11.91 4.19-25.95 13.63-25.95 27.69l0 28 2.56 1.2c14.27 6.65 32.15 10.42 47.85 10.42l4.44 0 0-39.62C28.9 13.63 14.86 4.19 2.95 0L1.47-0.52 0 0ZM-21.51 52.86C-10.12 58.17 7.13 62.87 24.46 62.87l0-35.18C24.46 16.11 12.05 7.91 1.47 4.19-9.1 7.91-21.51 16.11-21.51 27.69l0 25.17z" style="fill-rule:evenodd;" /> 
      </g> 
      <g transform="translate(31.1309,54.8155)"> 
       <path d="M0 0C-0.02-0.01-0.05-0.02-0.07-0.03-0.05-0.02-0.02-0.01 0 0" class="s0" /> 
      </g> 
      <g transform="translate(31.2388,54.8624)"> 
       <path d="M0 0C-0.04-0.01-0.07-0.03-0.11-0.05-0.07-0.03-0.04-0.01 0 0" class="s0" /> 
      </g> 
      <g transform="translate(31.0625,54.7837)"> 
       <path d="M0 0C0 0 0 0-0.01 0 0 0 0 0 0 0" class="s0" /> 
      </g> 
     </g> 
    </g> 
</symbol> 
</svg> 

<header> 
<div> 
    <a href="test.html"><svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg></a> 
</div> 
<div> 
    <svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg> 
</div> 
</header> 

<div class="clear"><!-- --></div> 

<footer> 
    <div> 
    <a href="test.html"><svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg></a> 
</div> 
<div> 
    <svg viewBox="0 0 576 90.44"> 
     <use xlink:href="#logo"/> 
    </svg> 
</div> 
</footer>