Inkscape:圆坐标
Inkscape: round coordinates
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
选项1:您需要在创建路径时使用捕捉,或者在创建路径后捕捉节点。设置网格为1px×1px,边画边抓。
选项 2:或者您需要编写一个脚本来查找 SVG 文件中的所有 'd' 属性,并将其中的值四舍五入为整数。
有两种设置数字精度的方法(针对 SVG 本身和保存到优化的 SVG 时)- 但那些只定义整数的长度 - 所以如果将其设置为 4,则可以得到 200.1以及 1200 或 12.48 ,因此在这种情况下不会有帮助。
下面的例子显示了 3 circles/points 和一条连接它们的线。这些点是四舍五入的整数,而该行具有尾随的小数值。
javascript 在转换所有路径(只有一个)并将它们对齐到最接近的整数之前等待 2 秒(以便您进行比较)。这可以通过路径角与圆的对齐看出。
在浏览器中加载您的 SVG,在浏览器控制台中 运行 JavaScript,然后通过右键单击节点并复制 outerHTML 导出 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 属性,将任何数字舍入到最接近的整数。
有,有设置坐标精度的方法
- 文件 -> 另存为...
- 将其另存为“优化的 SVG”
- 在第一个对话框设置中,将坐标“精度”设置为 3 或任意值
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
选项1:您需要在创建路径时使用捕捉,或者在创建路径后捕捉节点。设置网格为1px×1px,边画边抓。
选项 2:或者您需要编写一个脚本来查找 SVG 文件中的所有 'd' 属性,并将其中的值四舍五入为整数。
有两种设置数字精度的方法(针对 SVG 本身和保存到优化的 SVG 时)- 但那些只定义整数的长度 - 所以如果将其设置为 4,则可以得到 200.1以及 1200 或 12.48 ,因此在这种情况下不会有帮助。
下面的例子显示了 3 circles/points 和一条连接它们的线。这些点是四舍五入的整数,而该行具有尾随的小数值。
javascript 在转换所有路径(只有一个)并将它们对齐到最接近的整数之前等待 2 秒(以便您进行比较)。这可以通过路径角与圆的对齐看出。
在浏览器中加载您的 SVG,在浏览器控制台中 运行 JavaScript,然后通过右键单击节点并复制 outerHTML 导出 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 属性,将任何数字舍入到最接近的整数。
有,有设置坐标精度的方法
- 文件 -> 另存为...
- 将其另存为“优化的 SVG”
- 在第一个对话框设置中,将坐标“精度”设置为 3 或任意值