相對於絕對轉換的svg

Question

我一直在開發一個應用程序，該應用程序要求將svg中的所有轉換都平坦化，並且所有坐標都必須是絕對的。 它從相對（或增量）到絕對的這種轉換引起了我的問題。 原始的svg片段來自PDF到SVG的inkscape轉換（是的，這是一個漂亮的ordinay圖像！）。 Inkscape使用相對坐標定義了“路徑”。 我運行了我的代碼以將其轉換為絕對坐標，您認為這是微不足道的，但是文件呈現的方式卻完全不同。 看來路徑的起點已移動。

我一直在尋找有關為什么發生這種情況的解釋。 我查看了轉換后的文件，看不到問題。 路徑的起點是否在每個文件中都匹配？

誰能提供轉換結果不同的原因？

這兩個文件的來源是：原始相對：

 <?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> 

同一文件轉換為絕對文件

 <?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> 

Answer 1

您可以通過更改SVG輸出首選項來使Inkscape使用絕對路徑命令。

編輯->首選項->輸入/輸出-> SVG輸出->路徑字符串格式->絕對

更新資料

您的路徑不匹配，因為在轉換時您沒有正確解釋相對路徑。

如果將原始路徑與轉換后的路徑重疊，則可以看到錯誤所在。 我只是在下面的示例中包括第一個路徑。

 <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> 

您的第一個錯誤是第六條路徑命令，它是具有多對坐標的l / L命令。

 <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> 

原始相對路徑在l之后具有四對坐標。 您轉換后的版本只有三個。

我想是時候再進行一次調試了。 :)