以厘米为单位绘制 SVG 路径和多边形答案

【问题标题】：Drawing SVG path and polygon in cm以厘米为单位绘制 SVG 路径和多边形
【发布时间】：2019-03-22 02:44:50
【问题描述】：

我想在 svg 中以 cm 为单位绘制多边形和路径元素，而不是以像素为单位（默认选项）。我能够在数字后添加 cm 的线条和矩形做到这一点，但以下 svg 代码不起作用：

<svg width="70cm" height="70cm">
<polygon points="1cm,1cm  2.5cm, 1cm  3cm, 13cm  1cm, 13cm"
    style="stroke: #000099;
     fill: #3333cc;
     fill-opacity: 1;
     "  
     />
</svg>

路径相同。有谁知道如何解决这个问题？

更新：我尝试使用不同的屏幕，使用 inkscape 或 Chrome 读取 svg 文件。我在屏幕上测量了厘米，因为我想要绘制的形状是真实世界的厘米。以下是令人费解的结果：

<svg width="20cm" height="20cm" viewBox="0 0 20 20" >
  <polygon points='1,1  2.5,1  3,10  1,10'
    style="stroke: #000000; fill:none;"/>
</svg>

macbook air 屏幕，每英寸 118 像素：多边形永远不会在实际测量中，总是更小，无论是在 inkscape 还是 Chrome 在另一个屏幕上，每英寸 166 像素，在 Chrome 中可以测量，但在 Inkscape 中不行。如果我尝试在 SVG-edit 中导入也是一样的。

有人知道 Inkscape 出了什么问题吗？

谢谢

【问题讨论】：

How do I scale an SVG polygon in ems? 的可能重复项
@O.R.Mapper 与 em's 无关，OP 是在谈论 cm。 OP 你不能在不知道设备 DPI 的情况下做到这一点 - 这个问题实际上是这个问题的副本：stackoverflow.com/questions/27726232/scale-mm-to-pixels-in-css/… - 一般来说像素不是真实世界的测量单位；我当然假设您的意思是您要创建的矩形在屏幕上等于 1cm。
@NicholasKyriakides：“与 em 无关，OP 是在谈论 cm” - 对不起？这个问题是关于以具体单位表示 SVG 多边形点的，该单位可以为矩形的坐标和大小指定，但不能直接在多边形的 points 属性中指定。我链接到的问题是完全相同。唯一不同的是，其中一题使用cm的例子，另一题em，但这几乎不是概念上的差异，是是吗？
@O.R.Mapper 取决于 OP 试图实现的目标 - 如果他们只是希望 SVG 在形状定义中使用 cm（仅此而已），那么你是对的 - 如果他们想让屏幕上的实际空间的形状像 那么多厘米 那么你就错了。更多情况下不是后者 - 但让我们看看。
@NicholasKyriakides：鉴于 OP 在尝试“用于直线和矩形”时似乎对“在数字后添加 cm”的结果感到满意，听起来就像他们在使用 cm 在形状定义中。

标签： svg

【解决方案1】：

你不能直接。来自文档 (W3C) 的 BUT（计算机科学中总是有一个 but）：

多边形中的点在用户坐标系中表示
“1cm”等于“35.43307px”（因此是 35.43307 个用户单位）

所以我建议您在多边形中添加一个转换来进行转换并省略点列表中的“cm”：

<svg width="15cm" height="15cm">
    <g transform="scale(35.43307)">
        <polygon points="1,1  2.5,1  3,13  1,13"
                 style="stroke: #000099; fill: #3333cc; fill-opacity: 1;" />
    </g>
</svg>

【讨论】：

您需要知道设备的 DPI - 您的公式假设屏幕为 96-DPI，但通常情况并非如此 - 像素不是真实世界的测量单位
是的，但在网络世界中 1 英寸 = 96 CSS“像素”。因此，如果 OP 希望她的多边形与她使用 cm 的其他元素相匹配，那么 Mathhieu 的解决方案是正确的。 OP 并没有说她希望她的 SVG 厘米与现实世界的厘米完全匹配。
@PaulLeBeau 没错，没错-但我们想念他/她来澄清一下，呵呵-尽管如此，我还是发出了警告
是的，我想以厘米为单位绘制一个多边形作为真实世界的测量值，并且在屏幕上测量，
@Irene 浏览器不适用于真实世界的测量，因此您想要的结果是不可能的。