svg相對於絕對轉換

我一直在開發一個應用程序，它要求svg中的任何轉換都是平坦的，所有的座標都是絕對的。它從相對（或增量）到絕對的這種轉換導致了我的問題。原始的svg片段來源於PDF到SVG的Inkscape轉換（是的，這是一個非常典型的圖像！）。 Inkscape已經使用相關協調定義了「路徑」。我運行我的代碼轉換爲絕對座標，你會認爲這將是微不足道的，但文件呈現完全不同。似乎移動路徑的起點。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="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>

來源

2017-09-14 OldBloke

您可以通過更改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後的座標。您的轉換版本只有三個。

我想你可以再次進行調試。 :)

來源

2017-09-14 05:38:55

感謝提示保羅。我問這個問題試圖理解爲什麼他們會呈現不同的顏色，因爲源代碼可能並不總是Inkscape – OldBloke

這將是因爲你沒有正確解釋相對座標。發佈你的轉換器代碼，如果你想讓我們看看它。 –

謝謝Paul，這是一個缺失的問題。不知道我看了多少次輸出尋找差異！感謝您指出明顯的問題，我會檢查我的眼鏡！乾杯 – OldBloke

svg相對於絕對轉換

回答

相關問題