CSS 样式转换与 svg 转换

Question

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

谁能给我解释一下， 为什么下面的 css 动画实际上会导致元素的相同位置，无论我是否调整 [=43] =] 在动画之前，或者使用不同的屏幕分辨率？

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 进行翻译并仍在缩放这些像素尺寸以符合我设置的视图框这一事实？

这是我唯一能想到的，如果是这样的话，我会很感激 link 一些文档 :)

Answer 1

... measurements such as pixels, which I assumed would then result in improper translations on screens of various resolutions, or resizing of a browser window.

这是错误的假设。

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

所以 "SVG canvas units"（如 translate(-170, 27)）和 CSS 长度单位本质上是相同的 - 虚拟的。

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

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

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

:)

CSS 样式转换与 svg 转换

CSS style transform vs svg transform

javascript

svg

css-transforms

css-animations

responsive-design