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 指定单位时，它必须首先通过乘以每毫米的像素数来缩放为像素(环顾四周看起来通常是 about 3.78 ，但这可能会在各种情况下发生变化)。因此，您的实际宽度(以像素为单位)为 210x，其中 x 是每毫米的像素数。

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

您的第一个矩形(记住我们必须首先通过上述缩放从毫米转换为像素)从 10x/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内部和外部的意义是不一样的。