CSS 样式转换与 svg 转换

Posted 2023-03-28

【中文标题】CSS 样式转换与 svg 转换

【英文标题】：CSS style transform vs svg transform

【发布时间】：2016-04-27 00:49:33

【问题描述】：

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

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

【参考方案1】：

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

这是错误的假设。

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

所以“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 英寸）。

:)

【讨论】：

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