Runder Text in SVG: OK im Browser, kaputt in Inkscape

[Mat]

Moin, ich hab ein problem mit einer SVG.

Sie scheint mit allen gängigen Browsern zu funktionieren aber Inkscape kommt damit nicht zurecht. Ich benutze den Inkscape-CLI, um PNGs aus der Rohdatei zu erstellen. Soweit ich weiß, nutzt Inkscape CairoSVG für die Konvertierung und das ist ein gut etabliertes Tool. Also gehe ich mal davon aus, dass mein Code inkompatibel mit der Spezifikation ist und es einfach nur in Browsern funktioniert, weil sie extrem kompatibel sind.

Browser vs Inkscape und InkscapeCLI:​

Da scheint so einiges schief zu laufen. Ich kann es mir nur so erklären, dass die verwendeten Attribute nicht unterstützt werden. Vielleicht gibts auch ein Problem mit der Rotationsachse oder den Gruppen.

Der Code:​

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"
    xml:space="preserve">
    <style type="text/css">
        text {
            font-family: Courier New;
        }
        text.big {
            font-size: 52px;
            font-weight: bold;
            letter-spacing: 13px;
        }
        text.regular {
            font-size: 42px;
            letter-spacing: 11px;
        }
    </style>
    <defs>
        <!-- Arc for Text top -->
        <path id="circle_top" d="M 3,250 A 247,247 0 0,1 497,250" />
        <!-- Arc for Text bottom -->
        <path id="circle_bottom" d="M 3,250 A 247,247 0 0,0 497,250" />
    </defs>
    <g id="root">
        <circle cx="250" cy="250" r="247" style="stroke-width: 3px;
            stroke: brown; fill: white; fill-opacity: 1;" />
        <g id="logo" transform="translate(150,150)">
            <rect width="200" height="200" />
        </g>
        <!-- Top Text -->
        <text class="big" transform="translate(0 3)">
            <textPath href="#circle_top" startOffset="50%" text-anchor="middle" dominant-baseline="text-before-edge">
                ABCFEFG HIJK LMNO
            </textPath>
        </text>
        <!-- Bottom Text -->
        <text class="regular" transform="translate(0 -2)">
            <textPath href="#circle_bottom" startOffset="50%" text-anchor="middle" dominant-baseline="text-after-edge">
                123 456 7890
            </textPath>
        </text>
    </g>
</svg>

 

[german]

Irgendwas von deinem Text ist ja zu sehen (12). Versuch den Text direkt zwischen die Tags zu setzen (ohne neue Zeile und Einrückung). In der Art:

            <textPath href="#circle_top" startOffset="50%" text-anchor="middle" dominant-baseline="text-before-edge">ABCFEFG HIJK LMNO</textPath>

 

[Mat]

Ohja, Umbrüche und Tabs scheint Inkscape beim Text mit zu beachten, obwohl er diese eigentlich explizit braucht (tspan oder urlencodiert als 
). Das mit den Zeilenumbrüchen scheint die Ursache zu sein.

Und wenn zwischen Elementen wie <text ...> und <textPath ..> ein Absatz ist, dann wird auch dieser als Zeichen behandelt und alles wird verschoben. Das betrifft auch nicht-Text-Elemente. Und wenn man die Datei mit Stinkscape bearbeitet, dann fügt er Eine Verschiebung von 100px als Attribut ein, ignoriert diese aber. Der Browser hingegen ignoriert das nicht und versetzt den Text entlang des Pfades. Arrrrgh.. ich kriege das Kotzen.


Aber jetzt weiß ich wenigstens, dass ich das SVG-Dokument nicht formatieren darf, danke.

Inkscape nach einiger Bearbeitung:

   <!-- Top Text -->
   <text id="txt_top" class="big"><textPath id="tp_top" xlink:href="#circle_top" startOffset="50%" text-anchor="middle" dominant-baseline="text-before-edge">ABCFEFG HIJK LMNO</textPath></text>
 
   <!-- Bottom Text -->
   <text id="txt_bottom" class="regular" transform="translate(0 -2)">
      <textPath id="tp_bottom" href="#circle_bottom" startOffset="50%" text-anchor="middle" dominant-baseline="text-after-edge">123 456 7890</textPath>
   </text>