Ein Schlüssel zum Verständnis von SVG-Dateien ist die Erkenntnis, dass sie nicht wie andere gängige Bilddateiformate aussehen. Sie sind eine Auszeichnungssprache, die HTML und XML ähnlicher ist. Dies ist die Quelle Ihrer SVG-Datei:
<!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/> </svg> Diese pathAussage ist Ihr Haken. Das d=Attribut sind die Anweisungen, die die Form des Häkchens definieren. Betrachten Sie es wie ein perfekt transparentes (unsichtbares) Glas. Das Glas existiert ... aber man kann es nicht sehen. Sie können es und seine Form fühlen ... aber Sie müssen mehr dafür tun, damit Sie diese Form sehen können.
Was Sie hier nicht haben, ist ein Strichattribut. Ein Strich definiert eine Linie um die Außenkante der Form. Wir können die Breite des Strichs (die Dicke der Linie), die Farbe und andere Eigenschaften definieren. Nicht gemacht ... aber es gibt keine Linie um unsere unsichtbare Glasform ... also bleibt sie unsichtbar.
Wir haben Fülleigenschaften ( fill=und fill-opacity=). Füllung definiert die Farbe und den Inhalt der Oberfläche Ihrer Form. Die Fülleigenschaften werden jedoch auf context-fillund gesetzt context-fill-opacity. Kontextfüllung ist eine nicht standardmäßige Funktion. Es wird wahrscheinlich von der neueren Version der wichtigsten Browser unterstützt (ich habe es persönlich mit dem neuesten Edge, Firefox und Chrome getestet). Es gibt jedoch keine Garantie dafür, dass Bildbearbeiter und Bildbearbeiter dies unterstützen werden näher an den Standards bleiben. Jede Anwendung, die diese Funktion nicht unterstützt, wird sie wahrscheinlich völlig ignorieren.
Und das ist dein Problem. Sie haben keinen Strich ... und in Apps, die keine Kontextfüllung unterstützen, haben Sie keine Füllung. Das lässt Sie mit diesen unsichtbaren Glasstücken zurück. Es ist da ... man kann es einfach nicht sehen.
