CSS样式转换vs svg转换

我认为SVG的一大部分是可扩展因素。我知道如何很好地使用SVG来扩展和以多种不同的方式进行响应。通常可以在SVG元素上设置视图框，并根据屏幕像素创建坐标系。因此，所有的转换，平移，旋转，倾斜等都将与svg自己的坐标系有关。我认为在翻译等时，这应该比使用css动画更具优势，因为您必须使用诸如像素之类的度量单位，而我认为这会导致不同分辨率的屏幕上的不正确翻译，或者调整大小一个浏览器窗口。CSS样式转换vs svg转换

有人可以向我解释，为什么接下来的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>

注意，我设置内嵌的CSS g组件，这将确保过渡，当我修改样式触发与我的JavaScript。

我假定在不同的分辨率，这克元件将在不同的位置结束。

是svg元素以某种方式在后台无视我是通过CSS转换和缩放还是那些像素尺寸为一致我已经设置视框中的事实？

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

来源

2016-01-20 Loren Shqipognja

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

这是错误的假设。

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

所以“SVG画布单位”（如在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英寸）。

来源

2016-01-20 23:32:34

嗯......我是混乱的像素宽度属性，以诱导与像素定位为坐标，然后？例如，设置包含svg的元素的宽度时，设置像素宽度会导致布局不灵活，而宽度百分比会调整元素的大小，并且由于viewbox属性的原因，svg中的所有内容都会适当地缩放。这是svg胜过常规图像的优势;不过，我猜想通过translate属性来定位自己是否以像素或其他单位设置将相对于屏幕的大小而不管？我想我现在看到:) –

CSS样式转换vs svg转换

回答

相关问题