javascript – CSS样式转换vs svg转换

2023年2月5日 193次阅读

我认为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进行翻译,并且仍然将这些像素尺寸缩放为符合我设置的视图框？

这是我唯一能想到的,如果是这样的话,我会欣赏一些文档的链接:)

最佳答案

… 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画布单位”(如翻译(-170,27))和CSS长度单位基本相同 – 虚拟的东西.

为了使这更糟糕,1英寸的CSS也没有严格的意义 – 它远不是在屏幕表面测量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).

🙂

点赞