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

...像素这样的测量，我认为这会导致在各种分辨率的屏幕上进行不正确的翻译，或调整大小浏览器窗口。

这是错误的假设。

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

所以＆＃34; SVG帆布单位＆＃34; （比如translate(-170, 27)）和CSS长度单位基本相同 - 虚拟的东西。

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

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

参考像素是设备上一个像素的视角像素密度为96dpi，距离手臂的读取器的距离长度。对于标称臂长为28英寸，视角为因此约0.0213度。对于手臂的长度读数，因此1px 相当于约0.26毫米（1/96英寸）。

：）

CSS样式转换vs svg转换

1 个答案: