Javascript CSS样式转换与svg转换

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

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

Javascript

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

CSS

HTML

测试

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

我假设在不同的分辨率下，这个g元素会在不同的位置结束

svg元素是否在后台忽略了我正在通过css进行翻译，并且仍然缩放这些像素尺寸以符合我设置的viewbox

这是我能想到的唯一一件事，如果是这样的话，我希望有一些文档的链接：）

。。。像像素这样的测量，我假设会导致 不同分辨率屏幕上的不正确翻译，或调整大小 一个浏览器窗口的名称

这是错误的假设

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

因此，“SVG画布单元”（如在

翻译（-170，27）

中）和CSS长度单元本质上是相同的——某种虚拟的东西

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

参考：

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

---

：）

Hmm…我是否混淆了像素宽度属性，以像素作为坐标来诱导定位？例如，当设置包含svg的元素的宽度时，设置像素宽度会导致布局不灵活，而百分比宽度会调整元素的大小，并且由于viewbox属性，svg内的所有内容都会适当缩放。这是svg相对于常规图像的优势；但是我猜定位本身，通过translate属性，无论设置的是像素还是其他单位，都会与屏幕的大小无关？我想我现在明白了：）

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

<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>