Svg relativ zur absoluten Umwandlung

Question

Ich habe eine Anwendung entwickelt, die alle Transformationen in einem Svg erfordert, um abgeflacht werden, und alle Koordinaten absolut sein. Es ist diese Umwandlung von relativ (oder inkrementell) zu absolut, die mir ein Problem verursacht. Das Original-SVG-Fragment stammt aus einer Inkscape-Konvertierung einer PDF in SVG (und ja, es ist ein schönes Ordinay-Bild!). Inkscape hat die "Pfade" mit relativen Koordinaten definiert. Ich habe meinen Code ausgeführt, um absolute Koordinaten zu konvertieren, die Sie für trivial halten würden, aber die Dateien werden komplett anders gerendert. Es scheint, dass die Startpunkte für die Pfade verschoben sind.

Ich habe nach einer Erklärung gesucht, warum dies auftritt. Ich habe mir die konvertierte Datei angeschaut, ich kann das Problem nicht sehen. Der Startpunkt der Pfade stimmt in jeder Datei überein?

Kann jemand einen Grund angeben, warum die Konvertierung nicht zum gleichen Ergebnis führt?

Die Quelle für die beiden Dateien sind: Original-Relative:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<svg 
 
    
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    viewBox="2420 3960 70 40" 
 
    height="300" 
 
    width="700" 
 
    xml:space="preserve" 
 
    id="svg2436" 
 
    version="1.1"> 
 
     
 
    <g 
 
     
 
     id="g2446"> 
 
     <path 
 
     id="path2616" 
 
     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
     d="m 2440,3992.67 v 6 h -3 l -1,-1 h -2 l -1,-1 -1,-1 -1,-1 -1,-1 h -1 v -1 l -1,-2 -1,-1 v -3 l -1,-1 v -4 l 1,-2 v -1 l 1,-2 v -1 l 1,-1 1,-2 v -1 l 1,-1 1,13 v 3 l 1,1 1,2 h 1 l 1,1 1,1 h 2" /><path 
 
     id="path2618" 
 
     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
     d="m 2453,3976.67 v 1 l -1,1 v 3 l -1,14 -1,-1 -1,-1 -1,-2 -1,-1 v -1 l -1,-1 v -10 l 1,-1 1,-1 v -1 l 1,-1 1,-1 1,-1 1,-1 1,-1" /> 
 
     <path 
 
     id="path2620" 
 
     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
     d="m 2477,3994.67 -1,1 -1,1 -1,1 h -2 l -1,1 h -1 l -2,1 h -10 l -1,-1 h -2 l -1,-1 -1,-1 -1,-1 h -1 l 1,-14 v 5 l 1,1 1,1 1,1 v 0 l 1,1 1,1 2,1 h 9 l 1,-1 h 1 l 2,-1 1,-1 1,-1 1,-1 v -2 l 1,-1 v -3" /> 
 
     <path 
 
     id="path2622" 
 
     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
     d="m 2482,3982.67 v 3 l -1,2 v 1 l -1,2 v 1 l -1,1 -1,1 -1,1 -1,-13 v -4 l -1,-1 -1,-1 -1,-1 -1,-1 h -1 l -1,-1 -1,-1 h -9 l -2,1 h -1 l -1,1 -1,1 -1,1 -1,1 v -6 h -7 l -1,1 h -2 v 0 l -2,1 h -2 l -1,1 -1,1 h -1 l -1,1 -1,1 -1,1 v 1 l -1,2 v 3 l -1,-13 1,-1 h 1 l 2,-1 1,-1 1,-1 h 2 v 0 l 1,-1 h 3 l 1,-1 h 6 l 2,-1 h 4 2 l 2,1 h 6 l 1,1 h 3 l 1,1 h 2 l 1,1 1,1 1,1 1,1 1,1 1,1 1,1 v 2 l 1,1 v 2 l 1,1 v 2" /> 
 
     </g></svg>

gleiche Datei absolute

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<svg 
 
    
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    viewBox="2420 3960 70 40" 
 
    height="300" 
 
    width="700" 
 
    xml:space="preserve" 
 
    id="svg2436" 
 
    version="1.1"> 
 
     
 
    <g id="g2446"> 
 
     <path 
 
      id="path2616" 
 
      style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
      d="M2440,3992.67V3998.67H2437L2436,3997.67 H2434L2433,3996.67 2432,3995.67 2431,3994.67 H2430V3993.67L2429,3991.67 2428,3990.67 V3987.67L2427,3986.67 V3982.67L2428,3980.67 V3979.67L2429,3977.67 V3976.67L2430,3975.67 2431,3973.67 V3972.67L2432,3971.67 2433,3984.67 V3987.67L2434,3988.67 2435,3990.67 H2436L2437,3991.67 2438,3992.67 H2440" /> 
 
      <path 
 
      id="path2618" 
 
      style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
      d="M2453,3976.67V3977.67L2452,3978.67 V3981.67L2451,3995.67 2450,3994.67 2449,3993.67 V3992.67L2448,3991.67 V3981.67L2449,3980.67 2450,3979.67 V3978.67L2451,3977.67 2452,3976.67 2453,3975.67 " /> 
 
      <path 
 
       id="path2620" 
 
       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
       d="M2477,3994.67L2476,3995.67 2475,3996.67 H2473L2472,3997.67 H2471L2469,3998.67 H2459L2458,3997.67 H2456L2455,3996.67 2454,3995.67 H2453L2454,3981.67 V3986.67L2455,3987.67 2456,3988.67 V3988.67L2457,3989.67 2458,3990.67 H2467L2468,3989.67 H2469L2471,3988.67 2472,3987.67 2473,3986.67 V3984.67L2474,3983.67 V3980.67" /> 
 
       <path 
 
       id="path2622" 
 
       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" 
 
       d="M2482,3982.67V3985.67L2481,3987.67 V3988.67L2480,3990.67 V3991.67L2479,3992.67 2478,3993.67 2477,3994.67 V3990.67L2476,3989.67 2475,3988.67 2474,3987.67 H2473L2472,3986.67 2471,3985.67 H2462L2460,3986.67 H2459L2458,3987.67 2457,3988.67 2456,3989.67 V3983.67H2449L2448,3984.67 H2446V3984.67L2444,3985.67 H2442L2441,3986.67 2440,3987.67 H2439L2438,3988.67 2437,3989.67 V3990.67L2436,3992.67 V3995.67L2435,3982.67 2436,3981.67 H2437L2439,3980.67 2440,3979.67 H2442V3979.67L2443,3978.67 H2446L2447,3977.67 H2453L2455,3976.67 H2459L2461,3977.67 H2467L2468,3978.67 H2471L2472,3979.67 H2474L2475,3980.67 2476,3981.67 2477,3982.67 2478,3983.67 V3985.67L2479,3986.67 V3988.67L2480,3989.67 V3991.67" /> 
 
     </g></svg>

umgewandelt

Answer 1

Sie können Inkscape dazu veranlassen, absolute Pfadbefehle zu verwenden, indem Sie die SVG-Ausgabeeinstellungen ändern.

Bearbeiten -> Einstellungen -> Input/Output -> SVG-Ausgabe -> Pfad-String-Format -> Absolute

aktualisieren

Ihre Pfade passen nicht, weil Sie nicht die relativen Pfade richtig zu interpretieren wenn Sie konvertieren.

Wenn Sie Ihre ursprünglichen Pfade mit Ihren konvertierten Pfaden überlagern, können Sie sehen, wo Sie falsch liegen. Ich füge nur den ersten Pfad im folgenden Beispiel ein.

<svg 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    viewBox="2420 3960 70 40" 
 
    height="300" 
 
    width="700" 
 
    xml:space="preserve" 
 
    id="svg2436" 
 
    version="1.1"> 
 
     
 
    <path 
 
    d="m 2440,3992.67 v 6 h -3 l -1,-1 h -2 l -1,-1 -1,-1 -1,-1 -1,-1 h -1 v -1 l -1,-2 -1,-1 v -3 l -1,-1 v -4 l 1,-2 v -1 l 1,-2 v -1 l 1,-1 1,-2 v -1 l 1,-1 1,13 v 3 l 1,1 1,2 h 1 l 1,1 1,1 h 2" /> 
 

 
    <path 
 
    style="fill:red; fill-opacity:0.5" 
 
    d="M 2440,3992.67 V 3998.67 H 2437 L 2436,3997.67 H 2434 L 2433,3996.67 2432,3995.67 2431,3994.67 H2430V3993.67L2429,3991.67 2428,3990.67 V3987.67L2427,3986.67 V3982.67L2428,3980.67 V3979.67L2429,3977.67 V3976.67L2430,3975.67 2431,3973.67 V3972.67L2432,3971.67 2433,3984.67 V3987.67L2434,3988.67 2435,3990.67 H2436L2437,3991.67 2438,3992.67 H2440" /> 
 

 
</svg>

Ihr erster Fehler ist, auf dem sechsten Pfad-Befehl, der der l/L Befehl mit mehreren Paaren von Koordinaten ist.

<svg viewBox="2420 3960 70 40" height="300" width="700"> 
 
     
 
    <path 
 
    d="m 2440,3992.67 
 
     v 6 
 
     h -3 
 
     l -1,-1 
 
     h -2 
 
     l -1,-1 
 
      -1,-1 
 
      -1,-1 
 
      -1,-1 
 
     h -1 
 
     v -1 l -1,-2 -1,-1 v -3 l -1,-1 v -4 l 1,-2 v -1 l 1,-2 v -1 l 1,-1 1,-2 v -1 l 1,-1 1,13 v 3 l 1,1 1,2 h 1 l 1,1 1,1 h 2" /> 
 

 
    <path 
 
    style="fill:red; fill-opacity:0.5" 
 
    d="M 2440,3992.67 
 
     V 3998.67 
 
     H 2437 
 
     L 2436,3997.67 
 
     H 2434 
 
     L 2433, 3996.67 
 
      2432, 3995.67 
 
      2431, 3994.67 
 
     H 2430" /> 
 

 
</svg>

Der ursprüngliche relative Pfad vier Koordinatenpaare nach den l hat. Ihre konvertierte Version hat nur drei.

Zeit für Sie, einen anderen Debugging-Pass zu tun, denke ich. :)