CSS 样式转换与 svg 转换

Question

我认为 SVG 的很大一部分是可扩展性因素。我知道如何很好地使用 SVG 以多种不同的方式进行缩放和响应。通常可以在 SVG 元素上设置视图框，然后会根据屏幕的像素创建坐标系。因此，所有变换、平移、旋转、倾斜等都将相对于 svg 自己的坐标系。我认为在翻译等方面，这应该比使用 css 动画更有优势，因为您必须使用像素等测量单位，我认为这会导致在各种分辨率的屏幕上进行不正确的翻译，或调整大小一个浏览器窗口。

有人可以向我解释一下，为什么无论我是在动画之前调整窗口大小还是使用不同的屏幕分辨率，以下 css 动画实际上都会导致元素的相同位置？

Javascript

var g= document.getElementById("testingG");
g.setAttribute("style", "transform: translate("+dockingPoint[0]+"px, "+dockingPoint[1]+"px)");

CSS

#testingG {
    transition: 1s ease-in;
}

HTML

<svg viewBox="0 0 1409 78.875" >
    <g id="testingG"style="transform: translate(1375px, 40px)">
        <circle r="10" cy="0" cx="0" style="fill: rgb(151, 215, 241);"></circle>
        <text  transform="translate(-170, 27)">Testing</text>
    </g>

请注意，我为 g 元素设置了内联 css，这将确保在我使用 javascript 修改样式时触发转换。

我假设在不同的分辨率下，这个 g 元素最终会出现在不同的位置。

svg 元素是否在后台以某种方式忽略了我正在通过 css 进行翻译并仍然缩放这些像素尺寸以符合我设置的视图框的事实？

这是我唯一能想到的，如果是这种情况，我会很感激一些文档的链接:)

Answer 1

\n

...诸如像素之类的测量，我认为这会导致在各种分辨率的屏幕上出现不正确的翻译，或者调整浏览器窗口的大小。

\n

\n\n

这是错误的假设。

\n\n

CSS 像素不是屏幕像素。px在 CSS 中是一个逻辑长度单位，等于 1/96 英寸四舍五入到最接近的整数（以合理呈现 1px 边框）。

\n\n

因此，“SVG 画布单位”（如 中translate(-170, 27)）和 CSS 长度单位本质上是相同的 - 一些虚拟的东西。

\n\n

更糟糕的是，CSS 中的 1 英寸也没有严格的含义 - 它远不是在屏幕表面上测量的 1 英寸。

\n\n

参考： https: //www.w3.org/TR/css3-values/#absolute-lengths

\n\n

\n

参考像素是像素密度为 96dpi、距阅读器距离为一臂\xe2\x80\x99s\n 长度的设备上一个像素的视角。对于 28 英寸的标称臂\xe2\x80\x99s 长度，视角约为 0.0213 度。对于以arm\xe2\x80\x99s 长度读取，1px\n 相当于大约0.26 毫米（1/96 英寸）。

\n

\n\n

:)

\n