Search code examples
c#htmlsvgclippingdxf

SVG Clipping with only generated Paths


I've programmed a sweet tool for converting DXF/DWG files into SVG - this works already. The target of this project is to create a SVG clipping from that AutoCAD file.

Here is an example of the generated svg-file:

<svg width="231" height="586" viewBox="-1843.4575 -2473.4065 628 1588" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill:none">
      <g transform="scale(1,-1)">
        <!--Line-->
        <path d="M-1670.4575,936.6665 L-1670.4575,1276.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1672.4575,934.6665 A2,2 0 0,1 -1670.4575,936.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1670.4575,1276.6665 A2,2 0 0,1 -1672.4575,1278.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1672.4575,934.6665 L-1791.4575,934.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1672.4575,1278.6665 L-1791.4575,1278.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1793.4575,936.6665 A2,2 0 0,1 -1791.4575,934.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1791.4575,1278.6665 A2,2 0 0,1 -1793.4575,1276.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1793.4575,936.6665 L-1793.4575,1276.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1672.4575,1672.6665 L-1791.4575,1672.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1670.4575,1670.6665 A2,2 0 0,1 -1672.4575,1672.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1791.4575,1672.6665 A2,2 0 0,1 -1793.4575,1670.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1670.4575,1330.6665 L-1670.4575,1670.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1793.4575,1330.6665 L-1793.4575,1670.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1672.4575,1328.6665 A2,2 0 0,1 -1670.4575,1330.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1793.4575,1330.6665 A2,2 0 0,1 -1791.4575,1328.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1672.4575,1328.6665 L-1791.4575,1328.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1672.4575,2116.6665 L-1791.4575,2116.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1672.4575,2116.6665 A2,2 0 0,1 -1670.4575,2118.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1793.4575,2118.6665 A2,2 0 0,1 -1791.4575,2116.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1670.4575,2118.6665 L-1670.4575,2158.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1793.4575,2118.6665 L-1793.4575,2158.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1556.0799,2297.1304 A141,141 0 0,1 -1670.4575,2158.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1556.6636,2421.261 A264,264 0 0,1 -1793.4575,2158.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1556.0799,2297.1304 A2,2 0 0,1 -1554.4575,2299.0945 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1554.4575,2419.2716 A2,2 0 0,1 -1556.6636,2421.261 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1554.4575,2299.0945 L-1554.4575,2419.2716 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1672.4575,2066.6665 L-1791.4575,2066.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1791.4575,2066.6665 A2,2 0 0,1 -1793.4575,2064.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1793.4575,1724.6665 L-1793.4575,2064.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1670.4575,2064.6665 A2,2 0 0,1 -1672.4575,2066.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1793.4575,1724.6665 A2,2 0 0,1 -1791.4575,1722.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1670.4575,1724.6665 L-1670.4575,2064.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1672.4575,1722.6665 L-1791.4575,1722.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1672.4575,1722.6665 A2,2 0 0,1 -1670.4575,1724.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1504.4575,2299.0945 L-1504.4575,2419.2716 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1504.4575,2299.0945 A2,2 0 0,1 -1502.8351,2297.1304 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1388.4575,2158.6665 A141,141 0 0,1 -1502.8351,2297.1304 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1502.2514,2421.261 A2,2 0 0,1 -1504.4575,2419.2716 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1388.4575,2118.6665 L-1388.4575,2158.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1265.4575,2158.6665 A264,264 0 0,1 -1502.2514,2421.261 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1388.4575,2118.6665 A2,2 0 0,1 -1386.4575,2116.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1265.4575,2118.6665 L-1265.4575,2158.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1386.4575,2116.6665 L-1267.4575,2116.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1267.4575,2116.6665 A2,2 0 0,1 -1265.4575,2118.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1386.4575,1328.6665 L-1267.4575,1328.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1388.4575,1330.6665 A2,2 0 0,1 -1386.4575,1328.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1267.4575,1328.6665 A2,2 0 0,1 -1265.4575,1330.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1388.4575,1330.6665 L-1388.4575,1670.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1265.4575,1330.6665 L-1265.4575,1670.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1386.4575,1672.6665 A2,2 0 0,1 -1388.4575,1670.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1265.4575,1670.6665 A2,2 0 0,1 -1267.4575,1672.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1386.4575,1672.6665 L-1267.4575,1672.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1386.4575,2066.6665 L-1267.4575,2066.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1386.4575,2066.6665 A2,2 0 0,1 -1388.4575,2064.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1265.4575,2064.6665 A2,2 0 0,1 -1267.4575,2066.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1388.4575,1724.6665 L-1388.4575,2064.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1265.4575,1724.6665 L-1265.4575,2064.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1388.4575,1724.6665 A2,2 0 0,1 -1386.4575,1722.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1267.4575,1722.6665 A2,2 0 0,1 -1265.4575,1724.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1386.4575,1722.6665 L-1267.4575,1722.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1388.4575,936.6665 L-1388.4575,1276.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1388.4575,936.6665 A2,2 0 0,1 -1386.4575,934.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1386.4575,934.6665 L-1267.4575,934.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1386.4575,1278.6665 A2,2 0 0,1 -1388.4575,1276.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1267.4575,934.6665 A2,2 0 0,1 -1265.4575,936.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1386.4575,1278.6665 L-1267.4575,1278.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Line-->
        <path d="M-1265.4575,936.6665 L-1265.4575,1276.6665 " style="stroke:#000000;stroke-width:0.001;" />
        <!--Arc-->
        <path d="M-1265.4575,1276.6665 A2,2 0 0,1 -1267.4575,1278.6665 " style="stroke:#000000;stroke-width:0.001;" />
      </g>
    </svg>

In every viewer it looks perfect. But not when i try to clip it.

I've reckon that it should't contain more than one MoveTo command, is that right?

Is it maybe because the coordinates are absolute?

I've tried to remove the M commands with no affect. Also merged it into one Path with an "Z" close path at the end.

Would be niceif anyone has a solution.

Kind Regards


Solution

  • I figured it out by myself!

    What I've done is:

    1) Read all paths 2) Order them by "move to" and "end" points by matching coordinates. (if it is a curve, take care of the direction) 3) Remove "move to" statements except the first one 4) Merge all paths to one 5) Append "Z" at the end to close the path.

    Additionally I've calculated all values into percent values.

    The result is:

    <path d="M0.77083,0.4699 L0.9962,0.4699 L0.9962,0.4699 A0.0037,0.0013 0 0,0 1,0.4685 L1,0.2398 A0.0037,0.0013 0 0,0 0.9962,0.2385 L0.7708,0.2385 A0.0037,0.0013 0 0,0 0.7670,0.2398 L0.7670,0.4685 A0.0037,0.0013 0 0,0 0.7708,0.4699 Z" stroke="#000000" stroke-width="1.001" style="fill:#ff0000;stroke-width:2.49098039" />