CSS样式变换与SVG变换的区别

Question

我认为SVG的重要优点之一就是可扩展性。我很擅长使用SVG进行多种方式的缩放和响应。通常情况下，可以在SVG元素上设置viewbox，基于屏幕的像素将创建一个坐标系。因此所有的变换，平移，旋转，倾斜等都将相对于SVG自身的坐标系。我认为这比在翻译等方面使用CSS动画更具优势，因为你必须使用像素这样的测量单位，而我认为这会导致不同分辨率的屏幕或调整浏览器窗口大小时产生不当的翻译。

有人能解释一下，为什么以下CSS动画实际上会在resize窗口之前或使用不同的屏幕分辨率后元素的位置保持不变吗？

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进行的平移操作，仍然按照我设置的视口缩放像素尺寸？

这是我唯一能想到的事情，如果是这种情况，我希望提供一些文档链接:)

- Pasha Skender

Answer 1

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

那是错误的假设。

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

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

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

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

参考像素是指在像素密度为96dpi且距离读者一臂之长的设备上，一个像素的视角大小。对于一个标准的28英寸阅读距离，该视角大小约为0.0213度。因此，在阅读时，1px相当于约0.26毫米（1/96英寸）。

:)

- c-smile

---

嗯...我是不是混淆了像素宽度属性来诱导像素作为坐标来定位呢？例如，当设置一个包含svg的元素的宽度时，设置像素宽度会导致布局不灵活，而百分比宽度将调整元素大小，并且由于viewbox属性的存在，svg内部的所有内容都将适当缩放。这就是svg相对于常规图像的优势；然而，我猜定位本身，通过translate属性，无论是以像素还是其他单位设置，都将相对于屏幕的大小而言？我现在明白了 :) - Pasha Skender