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

回答

相關問題