珍しいビューボックスを使用してSVGを垂直方向に反転

Question

1000 1000 50 50のようなビューボックスを使用してSVGを垂直に反転しようとしています。一般的に、私はそれを行う方法を知っていますが、私は幾分座標系がSVGで扱われる方法に混乱しています。以下のテストスニペットを見つけてください。

例4には、私が達成しようとしているものが含まれていますが、うまくいきません。何か案が？

例1：基本的なSVG（作品）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 50 50" style="background-color: red"> 
 
    <g> 
 
     <line x1="0" y1="0" x2="20" y2="20" stroke-width="2" stroke="black" /> 
 
    </g> 
 
</svg>

例2：反転基本SVG（作品）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 50 50" style="background-color: red"> 
 
    <g transform="translate(0,50) scale(1,-1)"> 
 
    <line x1="0" y1="0" x2="20" y2="20" stroke-width="2" stroke="black" /> 
 
    </g> 
 
</svg>

例3：基本的なSVG、珍しいビューボックス（作品）と

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="1000 1000 50 50" style="background-color: red"> 
 
    <g> 
 
    <line x1="1000" y1="1000" x2="1020" y2="1020" stroke-width="2" stroke="black" /> 
 
    </g> 
 
</svg>

例4：基本的なSVG、珍しいビューボックスで、反転し（動作しない）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="1000 1000 50 50" style="background-color: red"> 
 
    <g transform="translate(0,1000) scale(1,-1)"> 
 
    <line x1="1000" y1="1000" x2="1020" y2="1020" stroke-width="2" stroke="black" /> 
 
    </g> 
 
</svg>

Answer 1

変換コマンドは右乗算されます。あなたの4番目の例では、行が最初にスケールされ（y = 1000がy = -1000に移動し、その後にy = -1000がy = 0に移動する）ことを意味します。ユーザー空間座標の最終位置は

<line x1="1000" y1="0" x2="1020" y2="-20" stroke-width="2" stroke="black" /> 

です。あなたのviewBoxは、1000と1050の間のy座標をカバーしています。その線はそれから遠く離れています。 （2 *起源+ビューボックスの高さまで上隅からの距離）

：あなたの目標は同じビューボックスを維持することである場合

、右の変換式は

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="1000 1000 50 50" style="background-color: red"> 
 
    <g transform="translate(0,2050) scale(1,-1)"> 
 
    <line x1="1000" y1="1000" x2="1020" y2="1020" stroke-width="2" stroke="black" /> 
 
    </g> 
 
</svg>

です