Mat
Aktives Mitglied
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.
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.
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:
Logo-Beispiel:
<?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>