Question

我在这里有这个.svg文件：

<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="4in"
     height="4in"
     version="1.1"
     viewBox="0 0 4 4">
    <rect width="100%" height="100%" fill="red"/>
    <line x1="0" y1="0"
          x2="4" y2="0"
          stroke="black" stroke-width="0.01"/>
    <line x1="0" y1="1"
          x2="4" y2="1"
          stroke="black" stroke-width="0.01"/>
    <line x1="0" y1="2"
          x2="4" y2="2"
          stroke="black" stroke-width="0.01"/>
    <line x1="0" y1="3"
          x2="4" y2="3"
          stroke="black" stroke-width="0.01"/>
    <line x1="0" y1="4"
          x2="4" y2="4"
          stroke="black" stroke-width="0.01"/>
    <line x1="0" y1="0"
          x2="0" y2="4"
          stroke="black" stroke-width="0.01"/>
    <line x1="1" y1="0"
          x2="1" y2="4"
          stroke="black" stroke-width="0.01"/>
    <line x1="2" y1="0"
          x2="2" y2="4"
          stroke="black" stroke-width="0.01"/>    
    <line x1="3" y1="0"
          x2="3" y2="4"
          stroke="black" stroke-width="0.01"/>    
    <line x1="4" y1="0"
          x2="4" y2="4"
          stroke="black" stroke-width="0.01"/>    
</svg>

我在chrome中加载文件。我拿着卷尺直到我的屏幕。

我希望看到相隔一英寸的线条。但是，线条小于1英寸

我很困惑。如何构建具有实际物理尺寸的.svg文件？

谢谢，

杰克

Answer 1

CSS单位"in"并不代表真实世界。无论是在屏幕上还是在打印时。这可能是最初的意图（我不确定），但现在肯定不是这样。无论如何，现在太难了，屏幕DPI从监视器变为监视器，模型变为模型。

现在CSS标准只将一英寸定义为96＆＃34; CSS像素＆＃34; （"1in" == "96px"）。

在SVG中，一个"px"与当前用户坐标系中的一个单位相同。

所以你不能依赖于一个带有＆＃34; 4in＆＃34;将在屏幕上测量四英寸，也不打印。您将需要进行测试并找出如何缩放坐标以使其适用于您正在使用的特定屏幕或打印机。

为什么我的卷尺和我的.svg文件不同意一英寸的长度？

1 个答案: