在 SVG 路径生成器中指定单位答案

【问题标题】：Specifying the Units in an SVG Path Generator在 SVG 路径生成器中指定单位
【发布时间】：2020-12-14 20:17:45
【问题描述】：

由于机密性，我无法详细说明我正在使用的代码，但我会尽力描述我遇到的问题。

我的教授制作了一个简单的 React 程序，该程序基于微芯片制造项目的一组参数生成和输出 SVG。我们使用 Flatten-js npm 库来创建 svg，以及一些将所有内容拼凑在一起的辅助函数。我们将参数指定为数字，但数字以微米为单位表示。我们有一个使用 Flatten.Polygon.svg() 方法从网页下载 svg 的保存功能。该方法采用一些参数，但指定单位不是其中之一。 SVG 看起来像：

<svg>
  <path stroke="none" stroke-width="1" fill="black" fill-rule="evenodd" fill-opacity="1" d="
M5999.774896627996,6000.3432414235895 L5992.810049576532,6002.509804857073 A0.0338333333333333,0.0338333333333333 0 0,1 5992.789950423468,6002.445192150708 L5999.754797474932,6000.278628717223 A0.04999999999999982,0.04999999999999982 0 0,1 5999.8,6000.25 L6005.7,6000.25 A0.04999999999999982,0.04999999999999982 0 0,1 6005.7,6000.35 L5999.8,6000.35 A0.04999999999999982,0.04999999999999982 0 0,1 5999.774896627996,6000.3432414235895 z
..."></path>
 </svg>

问题是，我需要将 svg 导入 Adobe Illustrator 和 Fusion 360。当我导入它们时，SVG 可以很好地包含我们预测的形状，但缩放比例错误。由于单位的单位是微米，但 F360 以毫米为单位，我预计必须将其缩小到 0.001 的大小，但按比例缩放时它太小了。我假设这与假设路径的 DPI 的程序有关，所以在 Illustrator 中我希望我可以手动指定 PPI，但它只有 72PPI 和 300PPI 的预设值，但 Illustrator 中 svg 的大小是无论 PPI 设置如何，都相同。

在某种程度上，这不再是关于 React，而是更多关于 html 和 svg 路径的细节，但程序确实使用 React 来完成它的工作。我希望我们可以在代码中做到这一点，但如果我必须手动编辑 SVG，我会的。任何见解将不胜感激。谢谢！

【问题讨论】：

使用转换属性来设置您需要的任何缩放。
“我无法深入了解代码的细节” - 请提供一些示例“玩具”代码
simple-ish React 程序是否在没有 viewBox 属性的情况下生成并输出了 SVG？
为了说明@enxaneta 可能的想法，<svg width="1mm" height="1mm" viewBox="5000 6000 1000 1000"> 会将路径的用户空间单位标识为微米。
我想我们已经到了某个地方，但没有生成 viewBox 属性。不过我可以手动输入。我可以在 svg 中指定 viewBox 参数，但我很好奇 @RobertLongson 引用的变换属性。我会调查这些并报告。

标签： html reactjs svg npm attributes

【解决方案1】：

为了说明@enxaneta 可能的想法，<svg width="1mm" height="1mm" viewBox="5000 6000 1000 1000"> 将标识路径的用户空间单位为微米。

事实证明，这绝对是解决方案。再加上一个变换属性，将其从微米缩放到毫米。谢谢大家的快速回复！

【讨论】：