SVG mm 和 px 坐标长度因定义的 viewBox 而不同

Question

在下面的 SVG 图像中，我希望两个矩形位于相同的位置并具有相同的大小，但事实并非如此。

我对 viewBox 属性的理解是，在这个例子中 10px 应该等于 1mm。这是正确的还是我错过了什么？

<?xml version="1.0" standalone="yes"?>
<svg 
    width="210mm" 
    height="297mm" 
    viewBox="0,0,2100,2970"
    preserveAspectRatio="none"        
    xmlns="http://www.w3.org/2000/svg">
        <rect x="10mm" y="10mm" width="50mm" height="50mm"
            fill="rgba(155,155,155,0.5)" id="x1" ></rect> 
        <rect x="100" y="100" width="500" height="500"
            fill="rgba(155,155,155,0.5)" id="x2" ></rect> 

    </svg>

提前致谢！

Answer 1

发生的情况是，当您使用 mm 指定单位时，必须首先通过乘以每毫米的像素数将其缩放为像素（环顾四周，这看起来通常约为 3.78，但在各种情况下可能会发生变化）。因此，您的实际像素宽度为 210 x，其中x是每毫米的像素数。

查看第二个矩形（没有单位），它从距左边缘 100/2100 = 4.76% 的点开始。

您的第一个矩形（请记住，我们必须首先通过上述缩放将毫米转换为像素）从左侧开始的 10 x /2100 = 1.8%（使用该值 3.78）。

添加

<line x1="1.8%" y1="0%" y2="100%" x2="1.8%" stroke="black" fill="none"/>
<line x1="4.76%" y1="0%" y2="100%" x2="4.76%" stroke="black" fill="none"/>

到 svg（并更改为没有单位说明符的矩形的颜色），我们看到这些百分比正是边缘所在的位置。

出于这个原因，在坐标上也使用 viewBox 和单位说明符可能不是一个好主意。

请记住，viewBox 实际上是一种转换（缩放和平移的某种组合）。因此，如果两个对象在没有 viewBox 的情况下看起来不同（这两个矩形会这样），那么它们在 viewBox 中也必须不同。

这里简单的一句话解释就是，由于这种变换，1mm的含义在viewBox里面和外面是不一样的。