以cm为单位绘制SVG路径和多边形

Ire*_*ene 5 svg

我想在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>
Run Code Online (Sandbox Code Playgroud)

路径也一样.有谁知道如何解决这个问题?

更新:我尝试使用不同的屏幕,使用inkscape或Chrome浏览svg文件.我在屏幕上测量了cm,因为我想要绘制的形状的真实世界cm.这里有令人费解的结果:

<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>
Run Code Online (Sandbox Code Playgroud)

macbook air screen,每英寸118像素:多边形永远不会在实际测量中,总是更小,在另一个屏幕上的inkscape和Chrome中,每英寸166像素,Chrome中的测量值是可以的,但在Inkscape中没有.如果我尝试导入SVG编辑,则相同.

有人知道Inkscape有什么问题吗?

谢谢

Tra*_*pII 5

你不能直接。但是,文档(W3C)中(但在计算机科学领域总是存在这种情况):

  • 多边形中的点在用户坐标系中表示
  • “ 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>
Run Code Online (Sandbox Code Playgroud)

  • 您需要了解设备的DPI-您的公式中假设有96 DPI屏幕,但情况并非如此-像素不是实际的测量单位 (5认同)
  • 是的,但在网络世界中1英寸= 96 CSS“像素”。因此,如果OP希望她的多边形与使用cm的其他元素匹配,那么Mathhieu的解决方案是正确的。OP并没有说她希望她的SVG厘米与现实世界的厘米完全匹配。 (3认同)