SVG erscheint nicht in Firefox

Question

Ich habe eine eingebettete SVG in einer HTML-Seite. Alles funktioniert gut, aber nicht mit Firefox ...
Ich habe gelesen, dass Firefox ist ziemlich rigoros interpretieren SVGs, so dass ich eine Menge Dinge ausprobiert, um meine SVG perfekt zu machen. Aber nach Firefox, das ist nicht genug ...
Dies ist ein Teil davon, ohne den ganzen Weg (und vor einem Versuch Dinge drauf):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86"> 
    <defs> 
     <style type="text/css"> 
      .cls-1 { 
       fill: transparent; 
       fill-rule: evenodd; 
       stroke: #fff; 
       stroke-width: 6px; 
      } 
     </style> 
     <clipPath id="clip"> 
      <use xlink:href="#cls-1-path"/> 
     </clipPath> 
    </defs> 
    <path d="M319.604,36.098 C319.409,...5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/> 
</svg> 

Haben Sie irgendwelche Idee, was ich tun soll?

Danke :)

Answer 1

Nun, es ist nicht, dass es überhaupt nichts ist. Sie wählten gerade einen fill: transparent; mit einem #fff weißen Anschlag auf einem #ffffff Hintergrund.

Weiß auf Weiß erscheint unsichtbar :-)

Vielleicht tut FireFox den #fff anders als anderen Browser interpretieren - als #FFFFFF und nicht als #FFF000.

Für Vollständigkeit, lege ich meinen (minimal modifizierte) Testfall:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86"> 
    <defs> 
     <style type="text/css"> 
      .cls-1 { 
       fill: transparent; 
       fill-rule: evenodd; 
       stroke: #fff444; 
       stroke-width: 6px; 
      } 
     </style> 
     <path id="cls-1-path" d = "M 0 0 L 550 230 L 160 0"/> 
     <clipPath id="clip"> 
      <use xlink:href="#cls-1-path"/> 
     </clipPath> 
    </defs> 
    <path d="M319.604,36.098 C319.409, 5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/> 
</svg>