SVG 绝对单位不正确

Question

我正在尝试在移动应用程序中创建一个标尺，无论 iPhone 或 Android 的型号如何，它都能正确缩放。我认为最简单的方法是创建一个具有绝对单位的 SVG 元素。但是，这在我的浏览器或 phone 上都无法正确缩放（在我的 Macbook pro 上是正确大小的 85%，在我的 android phone 上是正确大小的 2/3）。我对默认 SVG DPI、绝对单位、转换绝对值、缩放比例等进行了大量谷歌搜索，但没有发现任何有用的东西。

这里是简化的代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ruler</title>
</head>
<body>
    <svg x="0" y="0" width="6cm" height="10cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g fill="none" stroke="none">
            <line x1="0" y1="0" x2="0" y2="10cm" id="backboard" stroke="#000000" stroke-width="3" />
        </g>
    </svg>
</body>
</html>

任何帮助都将不胜感激。谢谢

Answer 1

没有 'default SVG DPI' - DPI 是屏幕的一个值 - 它在不同设备之间是不一样的，尤其是在移动设备之间。

假设您知道屏幕的 DPI，像素到毫米的公式是这样的：

mm = (pixels * 25.4) / DPI

换句话说，除非您知道屏幕的 DPI 值，否则您无法获得真实世界的单位测量值。

Answer 2

遗憾的是，物理单位与任何现实世界的基础无关，例如实际屏幕 DPI。

它们实际上是基于 "standard" CSS DPI 96（即 96 "CSS pixels"）。我认为 CSS 规范说浏览器可以自由地将 DPI 调整为其他值，例如，“1in”实际上是一英寸。但实际上 none 他们很麻烦。

因此，不幸的是，您将需要建立设备的真实 DPI 并适当地缩放您的坐标值。

SVG 绝对单位不正确

SVG absolute units incorrect

html

svg

absolute

units-of-measurement