Verknüpfte SVG nicht Antialias in IE11

Question

Ich habe ein SVG eines Client-Logo, das ein Farbschema für die Kopfzeile (blau auf weiß) und seine inverse in der Fußzeile (weiß auf blau) haben muss. Um die Belastung zu reduzieren, verwende ich ein einzelnes Inline-Element <svg> mit <symbol>, referenziere es an zwei Stellen unter Verwendung von <svg><use xlink:href="#logo"/></svg> und style jede Version dann entsprechend mit CSS.

So weit, so gut. Ich muss die SVG nur einmal anrufen und kann sie an beiden Stellen ohne Probleme anders gestalten.

Allerdings, nachdem ich diese Einstellung in IE11 überprüft habe, sah ich, dass das verknüpfte SVG schrecklich aussieht. Es scheint nicht Antialiasing zu sein, sondern nur in der verknüpften Version.

Ich habe die SVG für dieses Beispiel auf eine vereinfachte Version reduziert (und den Client anonymisieren), aber you can see this behavior in a fiddle, wenn Sie es in IE11 eine Vorschau anzeigen.

Hier ist ein Screenshot des Verhaltens in IE11. Die Version auf der linken Seite ist der Code, den ich möchte, aber Sie können die Qualitätsverschlechterung im Vergleich zum vollständigen SVG-Inline auf der rechten Seite sehen.

Gibt es einen Grund, warum nur IE11 (IE9 und IE10 diese korrekt dargestellt) ist das? Ich habe versucht, shape-rendering="geometricPrecision" und shape-rendering="optimizeQuality" sowohl in <svg> Elemente und in der <path> Element und die Qualität ändert sich nicht in IE11.

Was fehlt mir hier?

Answer 1

Es scheint zu funktionieren, wenn Sie die Quelle an den Anfang des Codes setzen.

Wie so:

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