Inkscape：圆形坐标答案

【问题标题】：Inkscape: round coordinatesInkscape：圆形坐标
【发布时间】：2018-04-30 09:07:04
【问题描述】：

Inkscape 中是否有命令将路径的坐标四舍五入到最接近的整数值。

例如，替换这个路径：

m 0,0 261.98828,-890.8828 -299.999999,-900 2593.486319,54.4063 -253.9941,850.09565 264.3594,870.83005 z

通过这个：

m 0,0 262,-891 -300,-900 2593,54 -254,850 264,871 z

【问题讨论】：

标签： inkscape

【解决方案1】：

是的，有办法设置坐标精度。

文件 -> 另存为...
将其另存为“优化的 SVG”
在第一个对话框设置中，将坐标“精度”设置为 3 或任何您想要的值

【讨论】：

【解决方案2】：

下面的示例显示了 3 个圆/点和一条连接它们的线。点是四舍五入的整数，而行有尾随的十进制值。

javascript 在转换所有路径（只有一个）并将它们与最接近的整数对齐之前等待 2 秒（以便您进行比较）。这可以通过路径角与圆的对齐来看出。

在浏览器中加载 SVG，在浏览器控制台中运行 JavaScript，然后通过右键单击节点并复制外层 HTML 来导出 DOM。应该可以的。

setTimeout(() => {
  document.querySelectorAll('path').forEach((p) => {
    p.setAttribute(
      'd',
      p.getAttribute('d')
      .split(/(\d*\.?\d*)/g)
      .map((e) => {
        return isNaN(parseFloat(e)) ?
          e :
          Math.round(parseFloat(e), 0)
      }).join(''))
  })
}, 2000)

html,
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

<svg viewBox="0 0 50 30" height="100%">
  <g fill="none">
    <circle cx="5" cy="21" r="1" stroke="green" stroke-width=".5" />
    <circle cx="43" cy="6" r="1" stroke="green" stroke-width=".5" />
    <circle cx="35" cy="24" r="1" stroke="green" stroke-width=".5" />
    <path
      stroke="red" 
      d="
       M 5.4131 20.555
       L 43.345 5.666
       L 34.822 24.22222
       Z"
     stroke-width=".5"
     />
  </g>
</svg>

它获取所有路径元素并编辑所有 d 属性，将任何数字四舍五入到最接近的整数。

【讨论】：

【解决方案3】：

选项 1：您需要在创建路径时使用捕捉，或在创建路径后捕捉节点。将网格设置为 1px x 1px，并在绘制时捕捉。

选项 2：或者您需要编写一个脚本来查找 SVG 文件中的所有“d”属性，并将其中的值四舍五入为整数。

有两种方法可以设置数字精度（对于 SVG 本身和保存到优化的 SVG 时） - 但那些只定义整数的长度 - 所以如果你将它设置为 4，你也可以获得 200.1作为 1200 或 12.48 ，所以在这种情况下这不会有帮助。

【讨论】：