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}}，但这可能会在各种情况下发生变化）。因此，您的实际宽度（以像素为单位）为210 x ，其中 x 是每mm的像素数。

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

你的第一个矩形（记住我们必须第一个通过上面的缩放从mm转换为像素）从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（并且更改为没有单位指示符的矩形的颜色），我们看到这些百分比正好在边缘所在的位置。

about 3.78

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

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

这里简化的一句话解释是由于这种转换，1mm的含义在viewBox内部不同于外部。

Answer 2

  

我对viewBox属性的理解是在这个实例中   10px应等于1mm。我这是对的吗？

不，那不对。 SVG宽度值“210mm”定义SVG视口宽度。换句话说，<svg>文档在页面上的显示范围。这可能是794px左右。该转换基于每英寸96“像素”的标准CSS DPI。

但SVG文档中用于坐标的“mm”值将被转换并视为SVG用户坐标系中的值。使用相同的转换率。所以“1mm”将转换为大约“3.78”。远小于“10”。