css SVG要素の変換 - 何が数学ですか？

Question

<rect>などのように、svg要素にtransform: translateX(50px)のような処理を行うと、50pxの単位がsvg単位になるか、画面上のピクセルが50になりますか？

Answer 1

Welp、私は私の答えを持っている

https://jsfiddle.net/oegmc7xt/

htmlの推測：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" width="200px"> 
    <rect fill="#444444" width="200" height="200"></rect> 
    <rect fill="#abcdef" width="100" height="100" class="move"></rect> 
</svg> 


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" width="100px"> 
    <rect fill="#444444" width="200" height="200"></rect> 
    <rect fill="#abcdef" width="100" height="100" class="move"></rect> 
</svg> 

CSS： "は50px" は50のSVGユニット

にスケーリングされるように

.move { 
    transform: translateX(50px) 
} 

はそう