Ich versuche librsvg
zu verwenden, um einige Diagramme, die im SVG-Format (Teil eines viel größeren Projekts) produziert werden. Das gerenderte Ergebnis sieht jedoch ganz anders aus als beim Öffnen der SVG-Datei in einem Webbrowser.librsvg css nicht passenden Nachkommen Selektor
Durch Auseinanderziehen der SVG-Datei Bit für Bit habe ich einen der Hauptgründe identifiziert, dass meine CSS-Stile nicht angewendet werden.
Hier ist ein mcve:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" version="1.1">
<style type="text/css"><![CDATA[
g path {
fill: none;
stroke: #00285f;
}
]]></style>
<g class="parent" transform="translate(50,50)">
<path class="mypath" d="M0,6V0H430V6" />
<line y2="6" x2="0" />
</g>
</svg>
In einem Web-Browser sieht es so aus:
Wenn ich konvertieren diesen Befehl png mit:
rsvg-convert -f png -o s2.png s2.svg
Sie können sehen, dass die Füllung und der Strich nicht auf den Pfad angewendet werden, sodass er als schwarzes Rechteck angezeigt wird.
Wenn ich die CSS zu ändern:
path {
fill: none;
stroke: #00285f;
}
dann wird es richtig gestylt.
Was geht hier vor? Sicherlich unterstützt librsvg etwas so Grundlegendes wie CSS-Nachkommen-Selektoren? Ich habe die Dokumentation durchgesehen und fand keine solche grundsätzliche Einschränkung.
Oder verwende ich CSS in einer Weise, die irgendwie nur in einem Browser funktioniert?
Ich benutze librsvg 2.39.0.
scheint ähnlich wie https://bugzilla.gnome.org/show_bug.cgi?id=702537 –
CSS-Unterstützung für librsvg war schon immer ein wunder Punkt. Ich habe sogar eine [Bibliothek] (https://www.npmjs.com/package/svg-icon-toolbox) für Inline-Stile geschrieben, damit mehr SVG-Inhalt direkt in Gnome funktioniert. – ccprog