仅生成路径的 SVG 剪辑答案

【问题标题】：SVG Clipping with only generated Paths仅生成路径的 SVG 剪辑
【发布时间】：2019-12-10 00:11:12
【问题描述】：

我编写了一个用于将 DXF/DWG 文件转换为 SVG 的实用工具 - 这已经可以了。该项目的目标是从该 AutoCAD 文件创建 SVG 剪辑。

这是生成的 svg 文件的示例：

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

在每个查看器中，它看起来都很完美。但当我尝试剪辑它时不会。

我认为它不应包含多个 MoveTo 命令，对吗？

可能是因为坐标是绝对的？

我已尝试删除 M 命令而没有任何影响。还将其合并到一个路径中，最后有一个“Z”关闭路径。

如果有人有解决方案会很好。

亲切的问候

【问题讨论】：

在每个查看器中它看起来都很完美。不，它不是，在 Chrome 中它是空的......因为笔画宽度
是的，我知道，但我不需要样式属性！在我看来，剪裁它并没有什么不同，不是吗？
剪辑是什么意思呢？是否要将其用作剪切路径？
没错！像这样 ->coderwall.com/p/blx8kw/svg-clippath-images
1。你有很多重复的路径。 2 你的路径是不包含任何东西的单独的线和弧。您需要的是这样的：<path d="M-1670.4575,936.6665 V1276.6665H-1791.4575V934.6665z" /> 3 如果您修复错误 1 和 2，并且您需要将其用作剪切路径，它将无法正常工作。你需要把所有的东西都从小组中拿出来。但是，由于您的组有一个转换，您需要将此转换应用于每个路径。您可以使用 CSS 来实现。接下来，您将所有内容放在 <clipPath> 元素中，并使用它来剪辑您想要的 svg 图像。

标签： c# html svg clipping dxf

【解决方案1】：

我自己想出来的！

我所做的是：

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.

此外，我已将所有值计算为百分比值。

结果是：

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

【讨论】：